fix:修改地图以及细节部分

ZhangXianQiang

2024-03-04 2b7b4e2ea52a17eda4eca7ada4a139ad20785631

fix:修改地图以及细节部分

 index.html

@@ -11,7 +11,7 @@
    <script type="module" src="/src/main.ts"></script>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: '22a08b696f47f78270366d5294c8f66e', //
            securityJsCode: 'd60cb542f11231fc9ceddcf2f3e45530', //
        }
    </script>
  </body>

 src/assets/img/test_img/t1.jpg

 src/assets/img/test_img/t2.png

 src/assets/img/test_img/t3.png

 src/assets/img/test_img/t4.jpg

 src/assets/img/test_img/t5.jpg

 src/assets/img/test_img/t6.jpg

 src/assets/img/test_img/t7.jpg

 src/utils/require.js

New file
@@ -0,0 +1,8 @@
export const require = (imgPath) => {
  try {
    const handlePath = imgPath.replace('@', '..');
    return new URL(handlePath, import.meta.url).href;
  } catch(err) {
    console.warn(err);
  }
}

 src/views/HomeView.vue

@@ -12,6 +12,9 @@

// import Chartgd from "@/views/daoAnOffice/chartgd.vue";

// 中心地图
import Map from './daoAnOffice/center/map.vue';

const settingStore = useSettingStore();
const { isScale } = storeToRefs(settingStore);
const wrapperStyle = {};
@@ -33,6 +36,7 @@
  >
    <div class="content_wrap">
      <!-- <chartgd class="gddt" v-show="!mapState"></chartgd> -->
      <Map v-if="!mapState"></Map>
      <Headers />
      <RouterView />
      <MessageContent />
@@ -59,12 +63,15 @@
  background-position: center center;
}
.d-bottom{
  position: relative;
  position: absolute;
  //width: 120px;
  bottom: 140px;
  height: 80px;
  width: 1920px;
  height: 41px;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  background-image: url("@/assets/img/bottombg.png");
  background-size: cover;
  background-size: contain;
  background-position: center center;
  margin-bottom: 4px;
}

 src/views/daoAnOffice/center-map.vue

@@ -81,7 +81,7 @@
  geo3D: {
    map: "dujiangyan", //注册地图的名字
    roam: true, //开启鼠标缩放和平移漫游。默认不开启
    bottom: 120,
    bottom: 80,
    left: 10,
    itemStyle: {
      color: "#4189f2", // 背景
@@ -181,7 +181,7 @@
  width: 225px;
  position: absolute;
  right: 0;
  bottom: 150px;
  bottom: 200px;
  background: rgba(17, 34, 58, 0.6);
  border: 1px solid #29466A;


 src/views/daoAnOffice/center/map.vue

New file
@@ -0,0 +1,327 @@
<template>
  <div class="map-container">
    <div class="map-content" id="map" ref="map"></div>


    <!-- 图标菜单 -->
    <div class="info-box">
      <!--      right菜单-->
      <div class="info-div" :class="{ 'info-active': item.isActive }" v-for="item in legendList" :key="item.id"
        @click="selectLegend(item)">
        <img :src="item.icon" alt="" class="item-tb-img">
        <div class="info-div-p">
          <p class="info-label">{{ item.name }}</p>
          <p class="info-num">{{ item.num }}</p>
        </div>
      </div>
    </div>



    <!-- 实时路况 -->
    <div class="road" @click="showRoad">
      <div class="item-tb">
        <img src="@/assets/img/sslk.png" alt="" class="item-tb-img">
        <p class="item-tb-p">实时路况</p>
      </div>

    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';

import { require } from '@/utils/require.js';


const map = ref(null);
let mapInstance = null;
let trafficLayer = null;;

// 是否显示实时路况
let isVisible = true;

// 地图的图标数组
const markers = [];

// 图列
const legendList = ref([
  {
    id: 1,
    name: '事故易发多发路段',
    num: 78,
    type: 1,
    icon: require('@/assets/img/sgyfd.png'),
    positions: [[103.647593, 30.981856], [103.646627, 30.988235], [103.650077, 30.988074]],
    isActive: false
  },
  {
    id: 2,
    name: '重点旅游通道',
    type: 2,
    num: 178,
    positions: [[103.647888, 30.985006], [103.650983, 30.986252], [103.641461, 30.984588]],
    icon: require('@/assets/img/zdlytd.png'),
    isActive: false
  },
  {
    id: 3,
    name: '都江堰景区',
    num: 278,
    positions: [[103.637916, 30.986298], [103.636751, 30.989508], [103.64093, 30.99344]],
    type: 3,
    icon: require('@/assets/img/djyjq.png'),
    isActive: false
  },
  {
    id: 4,
    name: '警力配备',
    num: 348,
    positions: [[103.646413, 30.996714], [103.634337, 31.0026], [103.620841, 31.001253]],
    type: 4,
    icon: require('@/assets/img/jlpb.png'),
    isActive: false
  },
  {
    id: 5,
    name: '打围施工',
    num: 578,
    positions: [[103.62134, 30.996972], [103.622005, 30.991923], [103.63062, 30.986588]],
    type: 5,
    icon: require('@/assets/img/dwsg.png'),
    isActive: false
  },
  {
    id: 6,
    name: '交通事故易发点',
    num: 788,
    positions: [[103.640319, 30.984486], [103.644916, 30.986956], [103.646853, 30.992143]],
    type: 1,
    icon: require('@/assets/img/jtysqy.png'),
    isActive: false
  },
  {
    id: 7,
    name: '重点运输企业',
    num: 758,
    positions: [[103.651482, 30.995956], [103.639654, 30.995206], [103.631119, 30.987425]],
    type: 7,
    icon: require('@/assets/img/zdlytd.png'),
    isActive: false
  },
  {
    id: 8,
    name: '公交线路',
    num: 758,
    positions: [[103.652716, 30.974745], [103.668166, 30.976447], [103.672511, 30.979961]],
    type: 8,
    icon: require('@/assets/img/gjxl.png'),
    isActive: false
  },
  {
    id: 9,
    name: '安全隐患',
    num: 718,
    positions: [[103.674056, 30.988625], [103.668155, 30.996379], [103.660333, 30.998098]],
    type: 9,
    icon: require('@/assets/img/aqyh.png'),
    isActive: false
  },

]);

// 切换状态
const selectLegend = (item) => {
  item.isActive = !item.isActive;
  const list = hasMarker(item.type);
  if (list) {
    if (item.isActive) {
      list.markerList.map((mark) => {
        mark.show();
      })
    } else {
      list.markerList.map((mark) => {
        mark.hide();
      })
    }
  } else {
    filterLegend(item);
  }
}

// 过滤图列
const filterLegend = (item) => {
  const { icon, positions, type } = item;
  const tempList = [];
  positions.map(position => {
    const markerIcon = createIcon(icon);
    const marker = ceateMarker(markerIcon, position);
    tempList.push(marker);
  });
  markers.push({ type: type, markerList: tempList })
  mapInstance.add(tempList);
}

// 创建图标
const createIcon = (img) => {
  return new AMap.Icon({
    size: new AMap.Size(34, 41),    // 图标尺寸
    image: img,  // Icon的图像
    imageSize: new AMap.Size(34, 41)   // 根据所设置的大小拉伸或压缩图片
  });
}


// 创建marker
const ceateMarker = (icon, position) => {
  return new AMap.Marker({
    icon: icon,
    position: new AMap.LngLat(position[0], position[1]),
    zooms: [2, 20],
  });
}

const hasMarker = (type) => {
  return markers.find(item => item.type === type);
}

const showRoad = () => {
  if (isVisible) {
    trafficLayer.hide();
    isVisible = false;
  } else {
    trafficLayer.show();
    isVisible = true;
  }
}

// 测试
const test = () => {
  const { icon, positions, type } = legendList.value[0];
  const tempList = [];
  positions.map(position => {
    const markerIcon = createIcon(icon);
    const marker = ceateMarker(markerIcon, position);
    tempList.push(marker);
  });

  markers.value.push({ type: type, markerList: tempList })

}


onMounted(() => {
  AMapLoader.load({
    key: "2898109c22191c3969957500934169dc", //申请好的 Web 端开发者 Key，首次调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
  })
    .then((AMap) => {
      mapInstance = new AMap.Map(map.value, {
        viewMode: '3D',
        mapStyle: "amap://styles/grey",
        center: [103.647193, 30.988763],
        pitch: 60, //地图俯仰角度，有效范围 0 度- 83 度
        zoom: 19, //初始化地图层级
      });
      trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10,
        zooms: [7, 22],
      });

      trafficLayer.setMap(mapInstance);

      // test();
      // console.log(markers.value[0]);
      // mapInstance.add(markers.value[0].markerList);
    })
    .catch((e) => {
      console.log(e);
    });
})
</script>

<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;

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


.info-div {
  align-items: center;
  display: flex;
  cursor: pointer;
  margin-top: 0.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-family: PingFang SC;
  font-weight: 800;
  border-radius: 6px;

  .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: 142px;
  left: 2220px;
  width: 300px;
  background: rgba(17, 34, 58, 0.6);
  border: 1px solid #29466A;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

.info-label {
  color: #74A6F2;
}

.info-num {
  color: #fff;
}

.info-active {
  background-color: rgba(68, 129, 221, 0.4);
}

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

  .item-tb-p {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 42px;
  }
}
</style>

 src/views/daoAnOffice/index.vue

@@ -113,17 +113,10 @@
      </div>

    </div>
    <div class="contetn_center">

    <div class="contetn_center" v-if="mapState">
      <!-- echart地图 -->
      <CenterMap class="contetn_center_top" v-show="mapState" />
      <CenterMap class="contetn_center_top" />

      <div class="map-change-button" @click="mapChange">
        <div class="button-title">地图切换</div>
        <div class="button-img">
          <img src="@/assets/img/dtqh.png" alt="">
        </div>
      </div>
    </div>

    <!-- 右边区域 -->
@@ -138,6 +131,14 @@
        <div class="right_wrapper_content">
          <Publicize />
        </div>
      </div>
    </div>

    <!-- 切换地图按钮 -->
    <div class="map-change-button" @click="mapChange">
      <div class="button-title">地图切换</div>
      <div class="button-img">
        <img src="@/assets/img/dtqh.png" alt="">
      </div>
    </div>

@@ -269,8 +270,8 @@
.map-change-button {
  width: 94px;
  position: absolute;
  bottom: 120px;
  right: 0;
  bottom: 100px;
  left: 2416px;
  font-size: 16px;
  color: #FFFFFF;
  z-index: 99;
@@ -290,6 +291,8 @@
  display: flex;
  min-height: calc(100% - 64px);
  justify-content: space-between;
  margin-top: -40px;
  padding: 0 22px;
}

//左边 右边 结构一样
@@ -327,6 +330,7 @@

.contetn_lr-item_left {
  width: 50%;
  margin-right: 26px;
}

.contetn_lr-item_contetn {
@@ -414,4 +418,5 @@

.right_wrapper_content {
  width: 617px;
}</style>
}
</style>

 src/views/daoAnOffice/left-top.vue

@@ -104,6 +104,12 @@
      //height: 16px;
      font-size: 16px;
    }
    &:first-of-type {
      margin-left: 0;
    }
    &:last-of-type {
      margin-right: 0;
    }

    .user_Overview_nums {
      display: flex;

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

@@ -3,8 +3,8 @@
  <RightTitle title="交通安全形势研判分析">
    <template #top>
      <div class="select-container flex">
        <div class="item whitespace-no-wrap cursor-pointer" :class="{'select-active': item.isActive}" v-for="item in selectItems" :key="item.itemIndex"
          @click="changeChart(item)">
        <div class="item whitespace-no-wrap cursor-pointer" :class="{ 'select-active': item.isActive }"
          v-for="item in selectItems" :key="item.itemIndex" @click="changeChart(item)">
          {{ item.name }}
        </div>
      </div>
@@ -59,12 +59,36 @@
]);

const testData1 = ref([
  { name: '都江堰市', state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
  { name: '奎光塔街道', state: { '2023-1': 1000, '2023-2': 6000, '2023-3': 1233 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
  { name: '蒲阳街道', state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
  { name: '聚源镇', state: { '2023-1': 1000, '2023-2': 8000, '2023-3': 12233 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
  { name: '银杏街道', state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
  { name: '石羊镇', state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 12313 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
  {
    name: '都江堰市',
    state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233,'2023-4': 2132, '2023-5': 2999 },
    state2: { '2023-1': 12312, '2023-2': 2312, '2023-3': 2111,'2023-4': 2132, '2023-5': 2999 }
  },
  {
    name: '奎光塔街道',
    state: { '2023-1': 21, '2023-2': 12, '2023-3': 224,'2023-4': 662, '2023-5': 71 },
    state2: { '2023-1': 12312, '2023-2': 21, '2023-3': 2111,'2023-4': 2132, '2023-5': 2999 }
  },
  {
    name: '蒲阳街道',
    state: { '2023-1': 1000, '2023-2': 2131, '2023-3': 1233,'2023-4': 2132, '2023-5': 3211 },
    state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111,'2023-4': 2132, '2023-5': 2999 }
  },
  {
    name: '聚源镇',
    state: { '2023-1': 1000, '2023-2': 500, '2023-3': 1111,'2023-4': 2132, '2023-5': 2999 },
    state2: { '2023-1': 12312, '2023-2': 2222, '2023-3': 2111,'2023-4': 2132, '2023-5': 2999 }
  },
  {
    name: '银杏街道',
    state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233,'2023-4': 2132, '2023-5': 12 },
    state2: { '2023-1': 1231, '2023-2': 121, '2023-3': 123,'2023-4': 321, '2023-5': 2999 }
  },
  {
    name: '石羊镇',
    state: { '2023-1': 1000, '2023-2': 8334, '2023-3': 1233,'2023-4': 123, '2023-5': 0 },
    state2: { '2023-1': 12312, '2023-2': 512, '2023-3': 241,'2023-4': 2132, '2023-5': 2999 }
  },
]);
let acitveData = ref(testData1.value[0]);

@@ -291,15 +315,17 @@
.item {
  margin: 0 8px;
  padding: 10px 14px;
  font-size: 12px;
  font-size: 14px;
  background: rgba(67, 102, 155, 0.4);
  border: 1px solid rgba(47, 91, 157, 0.8);
  flex-shrink: 0;
  color: #5B83BD;
}

.select-active {
 color: #fff; 
}

.item:last-child {
  margin-right: 0;
}
@@ -336,5 +362,4 @@
  .el-input__inner {
    color: #4481DD;
  }
}
</style>
}</style>

 src/views/daoAnOffice/right/danger/dataTable.vue

@@ -4,7 +4,8 @@
      <div class="top-title">安全事故列表</div>
      <div class="table-select flex">
        <div class="select-item mr-2 ml-2 cursor-pointer flex items-center"
          :class="{ 'item-active': selectItem.isActive }" v-for="selectItem in tableType" :key="selectItem.id">{{
          :class="{ 'item-active': selectItem.isActive }" v-for="selectItem in tableType" :key="selectItem.id"
          @click="changeSelect(selectItem)">{{
            selectItem.type }}</div>
      </div>
    </div>
@@ -102,21 +103,31 @@
    num3: 2
  },
];

const changeSelect = (selectItem) => {
  tableType.value.forEach((item) => {
    item.isActive = false;
  });
  selectItem.isActive = true;
}
</script>

<style lang="scss" scoped>
.container {
  height: 360px;
}

.table-container {
  position: relative;
}

.table-content {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}

.table-top {
  height: 51px;
  background-color: rgba(17, 34, 58, 0.6);
@@ -135,7 +146,7 @@
}

.select-item {
  padding: 0 14px;
  padding: 0 16px;
  height: 100%;
  border-bottom: 2px solid RGBA(98, 137, 230, 0);
  color: rgba(94, 134, 194, 1);
@@ -147,16 +158,12 @@
}

.data-table {
  font-size: 14px;
  font-size: 16px;
  border: 1px solid #29466A;
  width: 100%;
  height: 100%;
  background: transparent;
}

.table-color1 {}



::v-deep .el-table__inner-wrapper::before {
  background-color: transparent;
@@ -173,5 +180,4 @@

.el-table__fixed-right {
  height: 100% !important;
}
</style>
}</style>

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

@@ -51,7 +51,7 @@
.item {
  margin: 0 8px;
  padding: 10px 14px;
  font-size: 12px;
  font-size: 14px;
  background: rgba(67, 102, 155, 0.4);
  border: 1px solid rgba(47, 91, 157, 0.8);
  flex-shrink: 0;

 src/views/daoAnOffice/right/danger/infoView.vue

@@ -37,7 +37,7 @@
</template>

<script setup>
import testImage from '@/assets/img/test_img/道安办.png';
import { require } from '@/utils/require.js';

import ImageSwiper from './imageSwiper.vue';
import { ref } from 'vue';
@@ -51,11 +51,12 @@
    rectTime: '2023-13-23',
    state: '抢修中',
    images: [
      testImage,
      testImage,
      testImage,
      testImage,
      testImage,
      require('@/assets/img/test_img/t1.jpg'),
      require('@/assets/img/test_img/t2.png'),
      require('@/assets/img/test_img/t3.png'),
      require('@/assets/img/test_img/t1.jpg'),
      require('@/assets/img/test_img/t2.png'),
      require('@/assets/img/test_img/t3.png'),
    ]
  },
  {
@@ -66,11 +67,12 @@
    rectTime: '2023-13-23',
    state: '抢修中',
    images: [
      testImage,
      testImage,
      testImage,
      testImage,
      testImage,
      require('@/assets/img/test_img/t1.jpg'),
      require('@/assets/img/test_img/t2.png'),
      require('@/assets/img/test_img/t3.png'),
      require('@/assets/img/test_img/t1.jpg'),
      require('@/assets/img/test_img/t2.png'),
      require('@/assets/img/test_img/t3.png'),
    ]
  },
  {
@@ -81,11 +83,12 @@
    rectTime: '2023-13-23',
    state: '抢修中',
    images: [
      testImage,
      testImage,
      testImage,
      testImage,
      testImage,
      require('@/assets/img/test_img/t1.jpg'),
      require('@/assets/img/test_img/t2.png'),
      require('@/assets/img/test_img/t3.png'),
      require('@/assets/img/test_img/t1.jpg'),
      require('@/assets/img/test_img/t2.png'),
      require('@/assets/img/test_img/t3.png'),
    ]
  }
]);

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

@@ -41,7 +41,7 @@
</template>

<script setup>
import testImage from '@/assets/img/test_img/道安办.png';
import { require } from '@/utils/require.js';

import RightTitle from "@/components/right-title";
import { ref } from 'vue';
@@ -63,7 +63,7 @@
    unit: '都江堰市公安局',
    rectTime: '2023-13-23',
    state: '抢修中',
    image: testImage
    image: require('@/assets/img/test_img/t4.jpg'),
  },
  {
    itemIndex: 2,
@@ -72,7 +72,7 @@
    unit: '都江堰市公安局',
    rectTime: '2023-13-23',
    state: '抢修中',
    image: testImage
    image: require('@/assets/img/test_img/t5.jpg'),
  },
  {
    itemIndex: 3,
@@ -81,7 +81,7 @@
    unit: '都江堰市公安局',
    rectTime: '2023-13-23',
    state: '抢修中',
    image: testImage
    image: require('@/assets/img/test_img/t6.jpg'),
  },
  {
    itemIndex: 4,
@@ -90,7 +90,7 @@
    unit: '都江堰市公安局',
    rectTime: '2023-13-23',
    state: '抢修中',
    image: testImage
    image: require('@/assets/img/test_img/t7.jpg'),
  },
]);

@@ -120,7 +120,7 @@
.item {
  margin: 0 8px;
  padding: 10px 14px;
  font-size: 12px;
  font-size: 14px;
  background: rgba(67, 102, 155, 0.4);
  border: 1px solid rgba(47, 91, 157, 0.8);
  flex-shrink: 0;
@@ -178,7 +178,7 @@
.content-video-name {
  text-align: center;
  margin-top: 16px;
  font-size: 12px;
  font-size: 14px;
  color: rgba(91, 131, 189, 1);
}