1

.env.development

@@ -7,4 +7,5 @@ VITE_APP_ENV = 'development'
 # 桃江管理系统/开发环境
 VITE_APP_BASE_API = '/dev-api'
 
-VITE_APP_BASE_URL = 'http://192.168.110.13:20002'
+# VITE_APP_BASE_URL = 'http://192.168.110.13:20002'
+VITE_APP_BASE_URL = 'http://192.168.110.235:20002'

package.json

@@ -20,12 +20,15 @@
     "@wangeditor/editor": "^5.0.1",
     "@wangeditor/editor-for-vue": "^5.1.10",
     "axios": "0.24.0",
+    "bmap": "^1.0.1",
+    "bmapgl": "^1.0.0",
     "echarts": "5.2.2",
     "element-plus": "^2.0.1",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.6",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.2.1",
+    "mapv-three": "^1.0.18",
     "nprogress": "0.2.0",
     "vue": "3.2.26",
     "vue-cropper": "1.0.2",

src/components/baseEcharts/config.js

@@ -0,0 +1,74 @@
+// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
+import * as echarts from "echarts/core";
+
+// 引入内置组件，组件后缀都为Component
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  PolarComponent,
+  AriaComponent,
+  ParallelComponent,
+  LegendComponent,
+  RadarComponent,
+  ToolboxComponent,
+  DatasetComponent, // 数据集组件
+  DataZoomComponent,
+  VisualMapComponent,
+  TimelineComponent,
+  CalendarComponent,
+  GraphicComponent,
+  TransformComponent, // 数据转换器组件(filter, sort)
+} from "echarts/components";
+
+// 引入渲染器：echarst默认使用canvas渲染，引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
+
+// 标签自动布局、全局过渡动画等特性
+import { LabelLayout, UniversalTransition } from "echarts/features";
+
+// 引入图表类型，后缀都为Chart
+import {
+  BarChart,
+  LineChart,
+  PieChart,
+  MapChart,
+  RadarChart,
+  PictorialBarChart,
+} from "echarts/charts";
+
+// 注册必须的组件
+echarts.use([
+  // 内置组件
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  PolarComponent,
+  AriaComponent,
+  ParallelComponent,
+  LegendComponent,
+  RadarComponent,
+  ToolboxComponent,
+  DatasetComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+  TimelineComponent,
+  CalendarComponent,
+  GraphicComponent,
+  TransformComponent,
+  // 渲染器
+  CanvasRenderer,
+  SVGRenderer,
+  // 特性
+  LabelLayout,
+  UniversalTransition,
+  // 图表
+  BarChart,
+  LineChart,
+  PieChart,
+  MapChart,
+  RadarChart,
+  PictorialBarChart,
+]);
+
+export default echarts;

src/hooks/useEcharts.ts

@@ -0,0 +1,59 @@
+import {
+  Ref,
+  shallowRef,
+  unref,
+  onMounted,
+  onDeactivated,
+  onBeforeUnmount,
+} from "vue";
+
+import echarts from "../components/baseEcharts/config";
+
+export type EChartsCoreOption = echarts.EChartsCoreOption;
+
+const useEcharts = (elRef: Ref<HTMLDivElement>, options: EChartsCoreOption) => {
+  const charts = shallowRef<echarts.ECharts>();
+
+  const setOptions = (options: EChartsCoreOption) => {
+    charts.value && charts.value.setOption(options);
+  };
+
+  // 初始化
+  const initCharts = (themeColor?: Array<string>) => {
+    const el = unref(elRef);
+    if (!el || !unref(el)) {
+      return;
+    }
+    charts.value = echarts.init(el);
+    if (themeColor) {
+      options.color = themeColor;
+    }
+    setOptions(options);
+  };
+
+  // 重新窗口变化时，重新计算
+  const resize = () => {
+    charts.value && charts.value.resize();
+  };
+
+  onMounted(() => {
+    window.addEventListener("resize", resize);
+  });
+
+  // 页面keepAlive时，不监听页面
+  onDeactivated(() => {
+    window.removeEventListener("resize", resize);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener("resize", resize);
+  });
+
+  return {
+    initCharts,
+    setOptions,
+    resize,
+  };
+};
+
+export { useEcharts };

src/router/index.js

@@ -38,6 +38,15 @@ export const constantRoutes = [
           icon: 'user',
           affix: true
         }
+      },{
+        path: 'visualization',
+        name: 'visualization',
+        component: () => import('@/views/visualization/index.vue'),
+        meta: {
+          title: '可视化',
+          icon: '',
+          affix: true
+        }
       }
     ]
   },

src/views/home/index.vue

@@ -42,6 +42,10 @@
                 <img src="@/assets/images/888.jpg" />
                 <div class="textContainer">工信厅项目</div>
               </div>
+              <div class="imgContainer" @click="toLink(5)">
+                <img src="@/assets/images/888.jpg" />
+                <div class="textContainer">可视化入口</div>
+              </div>
             </div>
           </el-carousel-item>
         </el-carousel>
@@ -74,6 +78,9 @@ const toLink = (index)=>{
       break;
     case 4:
       window.open('http://222.240.80.54:18080/hnibdp-daq/login');
+      break
+    case 5:
+      window.open('../visualization/index.vue');
   }
 }
 const moveList = ()=>{

src/views/visualization/index.vue

@@ -0,0 +1,88 @@
+<!-- vue3引入百度api -->
+<template>
+    <div class="mapBox">
+        <div id="allmap"></div>
+    </div>
+</template>
+   
+<script setup>
+import { onMounted } from "vue";
+import { Engine, EmptySky } from "mapv-three";
+onMounted(() => {
+    loadMapScript(); // 加载百度地图资源
+});
+// 初始化地图
+const init = () => {
+    const center = [112.95941, 28.17741];
+    const Bmap = window.BMap; // 注意要带window，不然会报错（注意官方api,会有改动，之前是Bmap,后面3.0版本改为了BMap,最好查文档或者打印一下window）
+    const map = new Bmap.Map("allmap"); // allmap必须和dom上的id一直
+   
+    map.setCurrentCity("成都");
+    map.enableScrollWheelZoom(true);
+    map.setMapStyleV2({
+        styleId: '62ce43ad2a1362c23e612b783d7406e7'
+    });
+    map.centerAndZoom(new window.Bmap.Point(center[0], center[1]), 22);
+      map.enableScrollWheelZoom(true);
+      // map.enableKeyboard();
+      // map.enableInertialDragging();
+      // map.enableContinuousZoom();
+      map.setTilt(70); //地图水平面
+      map.setHeading(10); //地图旋转值
+    const engine = new Engine(map, {});
+    engine.map.setCenter(center);
+    engine.rendering.useMrt = true;
+    engine.rendering.shadow.enabled = true;
+    engine.rendering.animationLoopFrameTime = 40;
+    engine.rendering.colorAdjust.saturation = 0.25;
+    engine.rendering.colorAdjust.contrast = 0.15;
+    engine.rendering.colorAdjust.brightness = 0;
+
+    const sky = engine.add(new EmptySky());
+    sky.time = 3600 * 16.5;
+};
+const loadMapScript = () => {
+    // 此处在所需页面引入资源就是，不用再public/index.html中引入
+    var script = document.createElement("script");
+    script.type = "text/javascript";
+    script.className = "loadmap"; // 给script一个类名
+    script.src =
+        "https://api.map.baidu.com/getscript?v=3.0&ak=jWDCUpsk33htQsF6IEwk4ctkERTOFFH0";
+    // 此处需要注意：申请ak时，一定要应用类别一定要选浏览器端，不能选服务端，不然地图会报ak无效
+    script.onload = () => {
+        // 使用script.onload，待资源加载完成，再初始化地图
+        init();
+    };
+    let loadmap = document.getElementsByClassName("loadmap");
+    if (loadmap) {
+        // 每次append script之前判断一下，避免重复添加script资源标签
+        for (var i = 0; i < loadmap.length; i++) {
+            document.body.removeChild(loadmap[i]);
+        }
+    }
+    document.body.appendChild(script);
+};
+</script>
+<style scoped>
+/* 去除水印 */
+::v-deep(.BMap_cpyCtrl) {
+    display: none;
+}
+
+::v-deep(.anchorBL) {
+    display: none !important;
+}
+
+.mapBox {
+    width: 100%;
+    height: 100%;
+}
+
+#allmap {
+    /* // 注意给dom宽高，不然地图不出来 */
+    width: 100%;
+    height: 100%;
+    margin: auto;
+    padding: 0;
+}
+</style>

vite.config.js

@@ -5,8 +5,8 @@ import createVitePlugins from './vite/plugins'
 // https://vitejs.dev/config/
 let dev = {
   // shaoyang: `http://42.48.99.5:20002`
-  // shaoyang: `http://192.168.110.235:20002`
-  shaoyang: `http://192.168.110.13:20002`
+  shaoyang: `http://192.168.110.235:20002`
+  // shaoyang: `http://192.168.110.13:20002`
 }
 export default defineConfig(({ mode, command }) => {
   const env = loadEnv(mode, process.cwd())