Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/chongzhou-...

pyt

2025-03-24 df5222a781d241f5689a0d4daea3ee167378e588

Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/chongzhou-screen

 src/assets/tooltipBlue.png

 src/assets/tooltipOrange.png

 src/components/datascreen/CenterPanel.vue

@@ -31,23 +31,26 @@
    <!-- 中间地图 -->
    <div class="center-middle panel-item">
      <div class="map-chart">
        <v-chart class="chart" :option="mapOption" autoresize />
        <Map />
      </div>
    </div>

    <!-- 中间下部数据 -->
    <div class="center-bottom panel-item">
     

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

<script>
import Map from './map.vue';
export default {
  name: 'CenterPanel',
  components: {
    Map
  },
  data() {
    return {
      mapOption: {},
      progressList: [
        { label: '已受理', value: '2021103000001', percentage: 90 },
        { label: '已审核', value: '2021103000002', percentage: 70 },
@@ -144,9 +147,5 @@
    color: #7cb9e8;
  }

  .chart {
    width: 100%;
    height: calc(100% - 35px);
  }
}
</style>

 src/components/datascreen/map.vue

New file
@@ -0,0 +1,216 @@
<template>
    <div class="map-container">
        <div class="chart" ref="myMap" />
    </div>
</template>

<script>
// import "echarts-gl";
export default {
    name: 'Map',
    data() {
        return {
            mapBg: null // 地图背景图片
        }
    },
    mounted() {
        this.initMapBg();
        this.initMap();
    },
    methods: {
        // 初始化地图背景图片
        initMapBg() {
            // 创建一个 canvas 来生成背景图案
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = 8;
            canvas.height = 8;

            // 设置渐变
            const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
            gradient.addColorStop(0, 'rgba(0,24,106,0.8)');
            gradient.addColorStop(1, 'rgba(0,24,106,0.9)');

            // 绘制背景
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // 添加网格效果
            ctx.strokeStyle = 'rgba(0,234,255,0.1)';
            ctx.lineWidth = 0.5;
            ctx.beginPath();
            ctx.moveTo(0, canvas.height / 2);
            ctx.lineTo(canvas.width, canvas.height / 2);
            ctx.moveTo(canvas.width / 2, 0);
            ctx.lineTo(canvas.width / 2, canvas.height);
            ctx.stroke();

            // 保存为base64图片
            this.mapBg = canvas.toDataURL();
        },
        initMap() {
            // json地图数据-需要根据需求下载引入对应名称文件
            let mapJson = require("@/utils/map/chongzhou.json");
            let myChart = this.$echarts.init(this.$refs.myMap);
            myChart.showLoading();
            myChart.hideLoading();
            this.$echarts.registerMap("myMap", mapJson);

            let option = {
                tooltip: {
                    trigger: "none", // 关闭提示框
                },
                // 设置多层级地图实现立体效果 
                geo: [
                    {
                        map: "myMap", // 使用注册的地图名称
                        aspectScale: 1, // 地图长宽比
                        zoom: 1, // 地图缩放比例
                        top: "15%", // 距离容器顶部距离
                        bottom: "10%", // 距离容器底部距离
                        roam: false, // 禁用地图平移缩放
                        z: 5, // 图层层级，数值大的在上层
                        itemStyle: {
                            areaColor: "transparent", // 区域透明
                            borderColor: "#00eaff", // 边框颜色
                            borderWidth: 1 // 边框宽度
                        },
                        select: {
                            disabled: true // 禁用选中状态
                        },
                        tooltip: {
                            show: false, // 关闭提示框
                        },
                    },
                    {
                        map: "myMap", // 第二层地图
                        aspectScale: 1,
                        zoom: 1,
                        top: "16%", // 比第一层低一点
                        bottom: "9%",
                        roam: false,
                        z: 4, // 层级比第一层低
                        itemStyle: {
                            areaColor: "transparent",
                            borderColor: "#00eaff",
                            borderWidth: 1
                        },
                        select: {
                            disabled: true
                        },
                        tooltip: {
                            show: false,
                        },
                    },
                    {
                        map: "myMap", // 第三层地图
                        aspectScale: 1,
                        zoom: 1,
                        top: "17%", // 最底层
                        bottom: "8%",
                        roam: false,
                        z: 3, // 最底层层级
                        itemStyle: {
                            areaColor: "transparent",
                            borderColor: "#00eaff",
                            borderWidth: 1
                        },
                        select: {
                            disabled: true
                        },
                        tooltip: {
                            show: false,
                        },
                    },
                ],

                series: [
                    {
                        type: "map", // 地图类型
                        name: "地图", // 系列名称
                        selectedMode: false, // 禁用选中模式
                        aspectScale: 1, // 长宽比
                        zoom: 1, // 缩放比例
                        roam: false, // 禁用平移缩放
                        regionHeight: 2, // 三维地图的厚度
                        map: "myMap", // 使用的地图
                        z: 10, // 最顶层
                        top: "14%", // 主图层位置
                        bottom: "11%",
                        viewControl: { // 视角控制
                            distance: 115, // 视角距离主体的距离
                            alpha: 40, // 视角绕 x 轴，即上下旋转的角度
                            rotateSensitivity: [0, 0], // 禁用旋转
                            beta: 0, // 视角绕 y 轴，即左右旋转的角度
                        },
                        label: { // 标签样式
                            normal: {
                                show: true, // 显示标签
                                textStyle: {
                                    color: "#fff", // 标签文字颜色
                                    fontSize: 16, // 文字大小
                                    fontWeight: "normal", // 文字粗细
                                    textShadowColor: "rgba(0,234,255,0.8)", // 文字阴影颜色
                                    textShadowBlur: 10, // 文字阴影模糊
                                    opacity: 1, // 文字透明度
                                },
                            },
                            emphasis: {
                                color: "#fff", // 悬浮时文字颜色
                            },
                        },
                        itemStyle: { // 主图层样式
                            areaColor: {
                                image: this.mapBg, // 使用背景图片
                                repeat: 'repeat' // 平铺模式
                            },
                            borderColor: "#00eaff", // 边框颜色
                            borderWidth: 2, // 边框宽度
                            borderType: 'solid',
                            shadowColor: "#00eaff", // 阴影颜色
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 20,
                            opacity: 1
                        },
                        emphasis: {
                            disabled: true // 禁用悬浮效果
                        },
                        select: {
                            disabled: true
                        },
                        light: { // 光照相关的设置
                            main: { // 主光源
                                color: "#00eaff", // 光照颜色
                                intensity: 1.2, // 增加光照强度
                                shadow: true, // 是否显示阴影
                                shadowQuality: "high", // 阴影质量
                                alpha: 40,
                                beta: 0,
                            },
                            ambient: { // 环境光
                                color: "#00eaff", // 环境光颜色
                                intensity: 0.3, // 减弱环境光以突出主光源
                            },
                        },
                    },
                ],
            };
            myChart.setOption(option);
        }
    }
}
</script>

<style scoped>
.map-container {
    position: relative;
    width: 815px;
    height: 534px;
}

.chart {
    width: 100%;
    height: 100%;
}
</style>

 src/main.js

@@ -3,7 +3,9 @@
import './registerServiceWorker'
import router from './router'
import store from './store'
import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts
Vue.config.productionTip = false

new Vue({

 src/utils/map/chongzhou.json

New file
Diff too large