feat:大屏地图

ZhangXianQiang

2024-03-19 80f8e591eec342463e980efc08522125f493057f

feat:大屏地图

 src/views/screen/components/screen-examine/components/examine-chart.vue

@@ -10,7 +10,6 @@
</template>

<script>
import * as echarts from 'echarts';
import ExamineHola from './examine-hola.vue';
let barChart = null;
export default {
@@ -27,15 +26,9 @@
        {id: 4,name: '点位在线率', value: 40},
        {id: 5,name: '录像可用率', value: 80},
        {id: 6,name: '重点点位录像可用率', value: 20},
        {id: 7,name: '标注正确率', value: 24},
        {id: 8,name: '视图库对接稳定性', value: 25},
        {id: 9,name: '信息采集准确率', value: 75},
        {id: 10,name: '车辆卡口设备时钟准确性', value: 12},
        {id: 11,name: '设备抓拍图片时钟准确性', value: 82},
        {id: 12,name: '人脸卡口信息采集准确率', value: 13},
        {id: 13,name: '设备抓拍图片合格性', value: 91},
        {id: 14,name: '设备抓拍图片时钟准确性', value: 12},
        {id: 15,name: '平台在线率', value: 42},
        {id: 7,name: '一机一档合格率', value: 60},
        {id: 8,name: '卡门过车数据一致性', value: 40},
        
      ]
    }
  },
@@ -61,11 +54,13 @@
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-between;
    padding: 20px 0;
    box-sizing: border-box;

    .hola-item {
      flex-shrink: 0;
      width: 180px;
      height: 150px;
      width: 240px;
      height: 200px;
      color: #008000
    }
  }

 src/views/screen/components/screen-map/index.vue

New file
@@ -0,0 +1,154 @@
<template>
  <div class="map-container">
    <wrapper-title :title="'区域地图'"></wrapper-title>
    <div class="map-content">
      <div ref="map" class="map-style"></div>
    </div>
  </div>

</template>

<script>
import * as echarts from 'echarts';
import 'echarts-gl';
import mapData from '@/assets/map/zigong.json';
import WrapperTitle from '../wrapper-title/index';

echarts.registerMap('zigong', mapData);
console.log(mapData);
let mapChart = null;
let tempName = '';
let observer = null;
const mapConfig = {
  series: [{
    map: "zigong", //注册地图的名字
    type: "map3D",
    bottom: 0,
    left: 0,
    top: 0,
    right: 0,
    itemStyle: {
      color: "#4189f2", // 背景
      opacity: 1, //透明度
      borderWidth: 1, // 边框宽度
      borderColor: "#fff", // 边框颜色
      fontSize: 18, //
    },

    // 标签
    label: {
      show: true,
      color: "#fff", //地图初始化区域字体颜色
      fontSize: 18,
    },
    // 控制器
    viewControl: {
      beta: -30,
      alpha: 90,
      distance: 100,
      maxBeta: 180,
      panSensitivity: 0
    },
    // 鼠标移入时样式
    emphasis: {
      itemStyle: {
        color: "#F63545"
      }
    },

    // 数据
    data: mapData.features.map((item) => {
      return {
        name: item.properties.name,
        itemStyle: {
          color: "#4189f2"
        }
      }
    }),
  }
  ]

};
export default {
  name: 'DataMap',
  data() {
    return {

    }
  },
  components: {
    WrapperTitle
  },
  methods: {
    filterData(name) {
      this.initConfig();
      let temp = mapConfig.series[0].data.find(item => item.name === name);
      temp.itemStyle.color = '#F63545';
      mapChart.setOption(mapConfig, true);
      this.$emit('filterData', name);
    },
    initConfig() {
      mapConfig.series[0].data.forEach(item => {
        item.itemStyle.color = '#4189f2';
      });
    },
    // 监听变化
    observe() {
      if (!observer) {
        observer = new ResizeObserver(entries => {
          this.handleResize();
        })
      }
      observer.observe(this.$refs.map);
    },
    // 窗口变换
    handleResize() {
      if (mapChart) {
        mapChart.resize();
      }
    }
  },
  mounted() {
    mapChart = echarts.init(this.$refs.map);
    mapChart.setOption(mapConfig, true);
    mapChart.on('click', (params) => {
      if (tempName === params.name) {
        tempName = '';
        this.initConfig();
        mapChart.setOption(mapConfig, true);
        this.$emit('filterData', '');
      } else {
        tempName = params.name;
        this.filterData(params.name);
      }
    });
    this.observe();
  },
  beforeDestroy() {
    if (observer) {
      mapChart.dispose();
      observer.unobserve(this.$refs.map);
    }
  },
}
</script>

<style lang="scss" scoped>
.map-container {
  width: 100%;
  flex: 1;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;

  .map-content {
    flex: 1;
    background: rgba(67, 102, 155, 0.3);
  border: 1px solid rgba(47, 91, 157, 0.8);
  }
  .map-style {
    width: 100%;
    height: 100%;
  }
}
</style>

 src/views/screen/components/screen-wrapper/index.vue

@@ -7,7 +7,8 @@
        <screen-car></screen-car>
        <screen-video></screen-video>
      </div>
      <div class="center-container wrapper">
      <div class="center-container center-wrapper">
        <screen-map></screen-map>
        <screen-detection></screen-detection>

      </div>
@@ -24,6 +25,7 @@
import ScreenExamine from '../screen-examine/index';
import ScreenVideo from '../screen-video/index';
import ScreenCar from '../screen-car/index';
import ScreenMap from '../screen-map/index';
export default {
  name: 'ScreenWrapper',
  components: {
@@ -31,7 +33,8 @@
    ScreenDetection,
    ScreenExamine,
    ScreenVideo,
    ScreenCar
    ScreenCar,
    ScreenMap
  },
}
</script>
@@ -59,7 +62,7 @@
}

.wrapper {
  width: 33.3%;
  width: 27%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
@@ -75,4 +78,13 @@
    padding-right: 0;
  }
}
.center-wrapper {
  width: 46%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>