页面搭建
This commit is contained in:
parent
06094b0b3d
commit
d90568e4b8
|
|
@ -9,6 +9,8 @@ declare module 'vue' {
|
||||||
export interface GlobalComponents {
|
export interface GlobalComponents {
|
||||||
BarCom: typeof import('./src/components/echartsCom/barCom.vue')['default']
|
BarCom: typeof import('./src/components/echartsCom/barCom.vue')['default']
|
||||||
ElButton: typeof import('element-plus/es')['ElButton']
|
ElButton: typeof import('element-plus/es')['ElButton']
|
||||||
|
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||||
|
EquipmentDialog: typeof import('./src/components/customCom/equipmentDialog.vue')['default']
|
||||||
EquipmentLeasing: typeof import('./src/components/customCom/equipmentLeasing.vue')['default']
|
EquipmentLeasing: typeof import('./src/components/customCom/equipmentLeasing.vue')['default']
|
||||||
HotProvider: typeof import('./src/components/customCom/hotProvider.vue')['default']
|
HotProvider: typeof import('./src/components/customCom/hotProvider.vue')['default']
|
||||||
LineCom: typeof import('./src/components/echarts/lineCom.vue')['default']
|
LineCom: typeof import('./src/components/echarts/lineCom.vue')['default']
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,3 @@
|
||||||
/// <reference types="vite/client" />
|
/// <reference types="vite/client" />
|
||||||
declare module "nprogress"
|
declare module "nprogress"
|
||||||
|
declare module "BMap"
|
||||||
|
|
@ -1,4 +1,8 @@
|
||||||
# port 端口号
|
# port 端口号
|
||||||
VITE_PORT = 8888
|
VITE_PORT = 8888
|
||||||
# 自动打开浏览器
|
# 自动打开浏览器
|
||||||
VITE_OPEN = true
|
VITE_OPEN = true
|
||||||
|
# 百度地图key
|
||||||
|
VITE_AK = "cClgLBaLgGUdQDilX9dGvieL"
|
||||||
|
# 百度地图版本
|
||||||
|
VITE_AK_v = "2"
|
||||||
|
|
|
||||||
|
|
@ -3,4 +3,9 @@ VITE_ENV = 'development'
|
||||||
VITE_BUILD_MODE = 'dev'
|
VITE_BUILD_MODE = 'dev'
|
||||||
|
|
||||||
# 开发环境接口地址
|
# 开发环境接口地址
|
||||||
VITE_API_URL = '/proxyApi'
|
VITE_API_URL = '/proxyApi'
|
||||||
|
# 百度地图key
|
||||||
|
VITE_AK = "cClgLBaLgGUdQDilX9dGvieL"
|
||||||
|
|
||||||
|
# 百度地图版本
|
||||||
|
VITE_AK_v = "2"
|
||||||
|
|
@ -3,4 +3,8 @@ VITE_ENV = 'production'
|
||||||
VITE_BUILD_MODE = 'prod'
|
VITE_BUILD_MODE = 'prod'
|
||||||
|
|
||||||
# 线上环境接口地址
|
# 线上环境接口地址
|
||||||
VITE_API_URL = 'https://production.com'
|
VITE_API_URL = 'https://production.com'
|
||||||
|
# 百度地图key
|
||||||
|
VITE_AK = "cClgLBaLgGUdQDilX9dGvieL"
|
||||||
|
# 百度地图版本
|
||||||
|
VITE_AK_v = "2"
|
||||||
|
|
@ -3,4 +3,8 @@ VITE_ENV = 'production'
|
||||||
VITE_BUILD_MODE = 'sit'
|
VITE_BUILD_MODE = 'sit'
|
||||||
|
|
||||||
# 线上环境接口地址
|
# 线上环境接口地址
|
||||||
VITE_API_URL = 'https://testSit.com'
|
VITE_API_URL = 'https://testSit.com'
|
||||||
|
# 百度地图key
|
||||||
|
VITE_AK = "cClgLBaLgGUdQDilX9dGvieL"
|
||||||
|
# 百度地图版本
|
||||||
|
VITE_AK_v = "2"
|
||||||
|
|
@ -4,4 +4,8 @@ VITE_ENV = 'production'
|
||||||
VITE_BUILD_MODE = 'uat'
|
VITE_BUILD_MODE = 'uat'
|
||||||
|
|
||||||
# 线上环境接口地址
|
# 线上环境接口地址
|
||||||
VITE_API_URL = 'https://testUat.com'
|
VITE_API_URL = 'https://testUat.com'
|
||||||
|
# 百度地图key
|
||||||
|
VITE_AK = "cClgLBaLgGUdQDilX9dGvieL"
|
||||||
|
# 百度地图版本
|
||||||
|
VITE_AK_v = "2"
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Vite App</title>
|
<title>Vite App</title>
|
||||||
</head>
|
</head>
|
||||||
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
|
|
||||||
|
|
@ -47,6 +47,9 @@ dependencies:
|
||||||
vue:
|
vue:
|
||||||
specifier: ^3.3.4
|
specifier: ^3.3.4
|
||||||
version: 3.3.4
|
version: 3.3.4
|
||||||
|
vue-baidu-map-3x:
|
||||||
|
specifier: ^1.0.35
|
||||||
|
version: 1.0.35(vue@3.3.4)
|
||||||
vue-router:
|
vue-router:
|
||||||
specifier: ^4.2.5
|
specifier: ^4.2.5
|
||||||
version: 4.2.5(vue@3.3.4)
|
version: 4.2.5(vue@3.3.4)
|
||||||
|
|
@ -1015,6 +1018,32 @@ packages:
|
||||||
resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
|
resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
|
||||||
engines: {node: '>=8'}
|
engines: {node: '>=8'}
|
||||||
|
|
||||||
|
/bmaplib.curveline@1.0.0:
|
||||||
|
resolution: {integrity: sha512-9wcFMVhiYxNPqpvsLDAADn3qDhNzXp2mA6VyHSHg2XOAgSooC7ZiujdFhy0sp+0QYjTfJ/MjmLuNoUg2HHxH4Q==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
|
/bmaplib.distancetool@1.0.2:
|
||||||
|
resolution: {integrity: sha512-EvxMnQRH6xM036zx5OLPyTg5tMCTbFBuGTTHOtExLy2/T0X6v5Va0YE7c3IPm/a/Eo5V/ynYpOLOLZbRY8ccyA==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
|
/bmaplib.heatmap@1.0.4:
|
||||||
|
resolution: {integrity: sha512-rmhqUARBpUSJ9jXzUI2j7dIOqnc38bqubkx/8a349U2qtw/ulLUwyzRD535OrA8G7w5cz4aPKm6/rNvUAarg/Q==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
|
/bmaplib.lushu@1.0.7:
|
||||||
|
resolution: {integrity: sha512-LVvgpESPii6xGxyjnQjq8u+ic4NjvhdCPV/RiSS/PGTUdZKeTDS7prSpleJLZH3ES0+oc0gYn8bw0LtPYUSz2w==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
|
/bmaplib.markerclusterer@1.0.13:
|
||||||
|
resolution: {integrity: sha512-VrLyWSiuDEVNi0yUfwOhFQ6z1oEEHS4w36GNu3iASu6p52QIx9uAXMUkuSCHReNR0bj2Cp9SA1dSx5RpojXajQ==}
|
||||||
|
dependencies:
|
||||||
|
bmaplib.texticonoverlay: 1.0.2
|
||||||
|
dev: false
|
||||||
|
|
||||||
|
/bmaplib.texticonoverlay@1.0.2:
|
||||||
|
resolution: {integrity: sha512-4ZTWr4ZP3B6qEWput5Tut16CfZgII38YwM3bpyb4gFTQyORlKYryFp9WHWrwZZaHlOyYDAXG9SX0hka43jTADg==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/boolbase@1.0.0:
|
/boolbase@1.0.0:
|
||||||
resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
|
resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
|
||||||
dev: false
|
dev: false
|
||||||
|
|
@ -2139,6 +2168,10 @@ packages:
|
||||||
source-map-support: 0.5.21
|
source-map-support: 0.5.21
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/tiny-emitter@2.1.0:
|
||||||
|
resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/to-fast-properties@2.0.0:
|
/to-fast-properties@2.0.0:
|
||||||
resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
|
resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
|
||||||
engines: {node: '>=4'}
|
engines: {node: '>=4'}
|
||||||
|
|
@ -2346,6 +2379,21 @@ packages:
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
fsevents: 2.3.3
|
fsevents: 2.3.3
|
||||||
|
|
||||||
|
/vue-baidu-map-3x@1.0.35(vue@3.3.4):
|
||||||
|
resolution: {integrity: sha512-1FDzxgd+X7MVcG8JbyyxDOSYRDUi96qEuuNICQmwlAE/EDwf4vz1oYRhRz05s/MuDpW7aIBlubF/PlSTpBlUEw==}
|
||||||
|
peerDependencies:
|
||||||
|
vue: ^3.2.25
|
||||||
|
dependencies:
|
||||||
|
bmaplib.curveline: 1.0.0
|
||||||
|
bmaplib.distancetool: 1.0.2
|
||||||
|
bmaplib.heatmap: 1.0.4
|
||||||
|
bmaplib.lushu: 1.0.7
|
||||||
|
bmaplib.markerclusterer: 1.0.13
|
||||||
|
tiny-emitter: 2.1.0
|
||||||
|
vue: 3.3.4
|
||||||
|
vue-router: 4.2.5(vue@3.3.4)
|
||||||
|
dev: false
|
||||||
|
|
||||||
/vue-demi@0.12.5(vue@3.3.4):
|
/vue-demi@0.12.5(vue@3.3.4):
|
||||||
resolution: {integrity: sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==}
|
resolution: {integrity: sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==}
|
||||||
engines: {node: '>=12'}
|
engines: {node: '>=12'}
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,8 @@
|
||||||
<RouterView />
|
<RouterView />
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
|
|
@ -1,3 +0,0 @@
|
||||||
@import '@/assets/styles/reset/reset.scss';
|
|
||||||
@import '@/assets/styles/nprogress.scss';
|
|
||||||
@import '@/assets/styles/common.scss';
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
html, body, div, span, applet, object, iframe,
|
|
||||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
||||||
a, abbr, acronym, address, big, cite, code,
|
|
||||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
|
||||||
small, strike, strong, sub, sup, tt, var,
|
|
||||||
b, u, i, center,
|
|
||||||
dl, dt, dd, ol, ul, li,
|
|
||||||
fieldset, form, label, legend,
|
|
||||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
||||||
article, aside, canvas, details, embed,
|
|
||||||
figure, figcaption, footer, header, hgroup,
|
|
||||||
menu, nav, output, ruby, section, summary,
|
|
||||||
time, mark, audio, video {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
font-size: 100%;
|
|
||||||
font: inherit;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
/* HTML5 display-role reset for older browsers */
|
|
||||||
article, aside, details, figcaption, figure,
|
|
||||||
footer, header, hgroup, menu, nav, section {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
ol, ul {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
blockquote, q {
|
|
||||||
quotes: none;
|
|
||||||
}
|
|
||||||
blockquote:before, blockquote:after,
|
|
||||||
q:before, q:after {
|
|
||||||
content: '';
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
$main-color: #22b2ff;
|
|
||||||
|
|
@ -0,0 +1,136 @@
|
||||||
|
<template>
|
||||||
|
<div class="equipment_dialog">
|
||||||
|
<div class="equipment_content">
|
||||||
|
<div class="equip_title">
|
||||||
|
装备信息
|
||||||
|
</div>
|
||||||
|
<div class="sub_title">
|
||||||
|
<span class="title_text">XF986F轮胎式挖掘机</span>
|
||||||
|
<span class="sub_status">(在租)</span>
|
||||||
|
</div>
|
||||||
|
<div class="more_info">
|
||||||
|
<span style="padding-left: 0;">操作重量：7吨 </span>
|
||||||
|
<span>
|
||||||
|
铲斗容量：2立方米
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
租赁方：XXXXXXXXXX有限公司
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
租赁日期：2023.09.12-2024.09.12
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="time_select">
|
||||||
|
<el-date-picker v-model="timeRange" size="media" type="datetimerange" :shortcuts="shortcuts" range-separator="To"
|
||||||
|
start-placeholder="Start date" end-placeholder="End date" />
|
||||||
|
<el-button type="primary" style="margin-left: 12px;" size="media" >查询</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="map_line_out">
|
||||||
|
<mapLine></mapLine>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import mapLine from "components/mapBaidu/mapLine.vue"
|
||||||
|
const timeRange = ref<[Date, Date]>([
|
||||||
|
new Date(2000, 10, 10, 10, 10),
|
||||||
|
new Date(2000, 10, 11, 10, 10),
|
||||||
|
])
|
||||||
|
const shortcuts = [
|
||||||
|
{
|
||||||
|
text: 'Last week',
|
||||||
|
value: () => {
|
||||||
|
const end = new Date()
|
||||||
|
const start = new Date()
|
||||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||||
|
return [start, end]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Last month',
|
||||||
|
value: () => {
|
||||||
|
const end = new Date()
|
||||||
|
const start = new Date()
|
||||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||||
|
return [start, end]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Last 3 months',
|
||||||
|
value: () => {
|
||||||
|
const end = new Date()
|
||||||
|
const start = new Date()
|
||||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||||
|
return [start, end]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.equipment_dialog {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment_content {
|
||||||
|
width: 1148px;
|
||||||
|
height: 596px;
|
||||||
|
padding: 0px 60px 35px;
|
||||||
|
background-image: url("../../assets/img/mapBg.png");
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equip_title {
|
||||||
|
font-size: 25px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
height: 49px;
|
||||||
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub_title {
|
||||||
|
height: 41px;
|
||||||
|
padding-top: 35px;
|
||||||
|
.title_text {
|
||||||
|
font-size: 27px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub_status {
|
||||||
|
padding: 0 4px;
|
||||||
|
color: #70FBFF;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.more_info {
|
||||||
|
padding-bottom: 25px;
|
||||||
|
height: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
span {
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.map_line_out{
|
||||||
|
width: 1030px;
|
||||||
|
height: 374px;
|
||||||
|
padding-top: 25px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -19,13 +19,14 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<equipmentDialog></equipmentDialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { getImg } from "@/utils/index"
|
import { getImg } from "@/utils/index"
|
||||||
import mapEcharts from "../echartsCom/mapEcharts.vue"
|
import mapEcharts from "../echartsCom/mapEcharts.vue"
|
||||||
|
import equipmentDialog from "./equipmentDialog.vue"
|
||||||
const navInfo = reactive({
|
const navInfo = reactive({
|
||||||
list: [
|
list: [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||||
|
<style type="text/css">
|
||||||
|
body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
|
||||||
|
#allmap{width:100%;height:500px;}
|
||||||
|
p{margin-left:5px; font-size:14px;}
|
||||||
|
</style>
|
||||||
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
|
||||||
|
<title>添加自定义覆盖物</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="allmap"></div>
|
||||||
|
<p>图示中为房产覆盖物，鼠标移到覆盖物上，自动显示房屋套数</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
<script type="text/javascript">
|
||||||
|
// 百度地图API功能
|
||||||
|
const mp = new BMap.Map("allmap");
|
||||||
|
mp.centerAndZoom(new BMap.Point(116.3964,39.9093), 15);
|
||||||
|
mp.enableScrollWheelZoom();
|
||||||
|
// 复杂的自定义覆盖物
|
||||||
|
const initCustomDot=()=>{
|
||||||
|
function ComplexCustomOverlay(point){
|
||||||
|
this._point = point;
|
||||||
|
|
||||||
|
}
|
||||||
|
ComplexCustomOverlay.prototype = new BMap.Overlay();
|
||||||
|
ComplexCustomOverlay.prototype.initialize = function(map){
|
||||||
|
this._map = map;
|
||||||
|
const pixel = map.pointToOverlayPixel(this._point,{
|
||||||
|
useRound:false, // 设置此参数，防止抖动
|
||||||
|
fixPosition:true // 覆盖物跨越180时修正位置
|
||||||
|
});
|
||||||
|
const div = this._div = document.createElement("div");
|
||||||
|
div.style.position = "absolute";
|
||||||
|
div.style.width = "16px";
|
||||||
|
div.style.height = "16px";
|
||||||
|
div.style.background = "#0d84ec";
|
||||||
|
div.style.borderRadius = "50%";
|
||||||
|
const divInner = this._divInner = document.createElement("div");
|
||||||
|
divInner.style.position = "absolute";
|
||||||
|
divInner.style.width = "10px";
|
||||||
|
divInner.style.height = "10px";
|
||||||
|
divInner.style.left = "3px";
|
||||||
|
divInner.style.top = "3px";
|
||||||
|
divInner.style.background = "#f00";
|
||||||
|
divInner.style.borderRadius = "50%";
|
||||||
|
mp.getPanes().labelPane.appendChild(div);
|
||||||
|
mp.getPanes().labelPane.appendChild(divInner);
|
||||||
|
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
ComplexCustomOverlay.prototype.draw = function(){
|
||||||
|
const map = this._map;
|
||||||
|
const pixel = map.pointToOverlayPixel(new BMap.Point(116.3964,39.9093));
|
||||||
|
this._div.style.left = pixel.x + "px";
|
||||||
|
this._div.style.top = pixel.y + "px";
|
||||||
|
this._divInner.style.left = pixel.x +3+ "px";
|
||||||
|
this._divInner.style.top = pixel.y +3+ "px";
|
||||||
|
}
|
||||||
|
const myCompOverlay = new ComplexCustomOverlay(new BMap.Point(116.3964,39.9093) );
|
||||||
|
mp.addOverlay(myCompOverlay);
|
||||||
|
}
|
||||||
|
|
||||||
|
initCustomDot()
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,105 @@
|
||||||
|
<template>
|
||||||
|
<div id="equipmentIdMap" class="map">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { getImg } from "@/utils/index"
|
||||||
|
let map: any = null
|
||||||
|
let point: any = null
|
||||||
|
onMounted(() => {
|
||||||
|
console.log("map", "map")
|
||||||
|
initMap()
|
||||||
|
})
|
||||||
|
|
||||||
|
const initMap = () => {
|
||||||
|
map = new BMap.Map("equipmentIdMap");
|
||||||
|
point = new BMap.Point(116.3964, 39.9093)
|
||||||
|
map.centerAndZoom(new BMap.Point(116.3964, 39.9093), 18);
|
||||||
|
console.log("map", map)
|
||||||
|
map.enableScrollWheelZoom();
|
||||||
|
setTimeout(() => {
|
||||||
|
|
||||||
|
initCustomDot()
|
||||||
|
const startIcon ={
|
||||||
|
imgUrl:'/src/assets/img/mapStart.png',
|
||||||
|
position:[116.3964, 39.9093],
|
||||||
|
size:[60,60]
|
||||||
|
|
||||||
|
}
|
||||||
|
initIcon(startIcon.imgUrl,startIcon.position,startIcon.size)
|
||||||
|
|
||||||
|
|
||||||
|
initPolyline()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const initCustomDot = () => {
|
||||||
|
function ComplexCustomOverlay(point) {
|
||||||
|
this._point = point;
|
||||||
|
|
||||||
|
}
|
||||||
|
ComplexCustomOverlay.prototype = new BMap.Overlay();
|
||||||
|
ComplexCustomOverlay.prototype.initialize = function (map) {
|
||||||
|
const div = this._div = document.createElement("div");
|
||||||
|
div.style.position = "absolute";
|
||||||
|
div.style.width = "30px";
|
||||||
|
div.style.height = "30px";
|
||||||
|
div.style.background = "#fff";
|
||||||
|
div.style.borderRadius = "50%";
|
||||||
|
const divInner = this._divInner = document.createElement("div");
|
||||||
|
divInner.style.position = "absolute";
|
||||||
|
divInner.style.width = "20px";
|
||||||
|
divInner.style.height = "20px";
|
||||||
|
divInner.style.left = "5px";
|
||||||
|
divInner.style.top = "5px";
|
||||||
|
divInner.style.background = "#0788e6";
|
||||||
|
divInner.style.borderRadius = "50%";
|
||||||
|
map.getPanes().labelPane.appendChild(div);
|
||||||
|
map.getPanes().labelPane.appendChild(divInner);
|
||||||
|
|
||||||
|
return div;
|
||||||
|
}
|
||||||
|
ComplexCustomOverlay.prototype.draw = function () {
|
||||||
|
|
||||||
|
const pixel = map.pointToOverlayPixel(new BMap.Point(116.3964, 39.9093));
|
||||||
|
this._div.style.left = pixel.x + "px";
|
||||||
|
this._div.style.top = pixel.y + "px";
|
||||||
|
this._divInner.style.left = pixel.x + 5 + "px";
|
||||||
|
this._divInner.style.top = pixel.y + 5 + "px";
|
||||||
|
}
|
||||||
|
const myCompOverlay: any = new ComplexCustomOverlay(new BMap.Point(116.3964, 39.9093));
|
||||||
|
map.addOverlay(myCompOverlay);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const initPolyline = () => {
|
||||||
|
var polyline = new BMap.Polyline([
|
||||||
|
new BMap.Point(116.3964, 39.9093),
|
||||||
|
new BMap.Point(116.3944, 39.9063),
|
||||||
|
new BMap.Point(116.3954, 39.9123),
|
||||||
|
], { strokeColor: "blue", strokeWeight: 8, strokeOpacity: 1. });
|
||||||
|
map.addOverlay(polyline);
|
||||||
|
}
|
||||||
|
|
||||||
|
const initIcon=(imgUrl:any,position:any,size:any)=>{
|
||||||
|
var myIcon = new BMap.Icon("https://api.map.baidu.com/img/markers.png", new BMap.Size(60,60));
|
||||||
|
// 创建Marker标注，使用小车图标
|
||||||
|
var pt = new BMap.Point(...position);
|
||||||
|
var marker = new BMap.Marker(pt, {
|
||||||
|
icon: myIcon
|
||||||
|
});
|
||||||
|
// 将标注添加到地图
|
||||||
|
map.addOverlay(marker);
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.map {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
|
|
@ -11,12 +11,7 @@ import highcharts from 'highcharts';
|
||||||
import highcharts3d from 'highcharts/highcharts-3d';
|
import highcharts3d from 'highcharts/highcharts-3d';
|
||||||
// 调用3d图表
|
// 调用3d图表
|
||||||
highcharts3d(highcharts);
|
highcharts3d(highcharts);
|
||||||
|
|
||||||
import BaiduMap from 'vue-baidu-map'
|
|
||||||
|
|
||||||
Vue.use(BaiduMap, {
|
|
||||||
ak: 'U4Bn9fW4tEtgEOtQ29cTpIBm47Ey4LCX'//百度地图密钥
|
|
||||||
});
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
||||||
app.use(createPinia())
|
app.use(createPinia())
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
@import './variable.scss';
|
||||||
|
@import './mixin.scss';
|
||||||
|
@import './common.module.scss';
|
||||||
|
@import './nprogress.scss';
|
||||||
|
@import './common.scss';
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
.van-button--primary {
|
|
||||||
background-color: $main-color;
|
|
||||||
border: $main-color;
|
|
||||||
}
|
|
||||||
|
|
@ -1,12 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="out_echart">
|
<div class="out_echart">
|
||||||
<div class="echart_row_1">
|
|
||||||
|
<mapLine></mapLine>
|
||||||
|
|
||||||
|
<!-- <div class="echart_row_1">
|
||||||
<div class="echart_cell">
|
<div class="echart_cell">
|
||||||
<!-- <lineCom :title="lineComProps.title" :legendDataList="lineComProps.legendDataList"
|
<lineCom :title="lineComProps.title" :legendDataList="lineComProps.legendDataList"
|
||||||
:FeatureList="lineComProps.FeatureList" :xAxisData="lineComProps.xAxisData"
|
:FeatureList="lineComProps.FeatureList" :xAxisData="lineComProps.xAxisData"
|
||||||
:seriesMultipleFlag="lineComProps.seriesMultipleFlag" :seriseMultipleName="lineComProps.seriseMultipleName"
|
:seriesMultipleFlag="lineComProps.seriesMultipleFlag" :seriseMultipleName="lineComProps.seriseMultipleName"
|
||||||
:seriseMultipleData="lineComProps.seriseMultipleData" :xAxisProps="lineComProps.xAxisProps"
|
:seriseMultipleData="lineComProps.seriseMultipleData" :xAxisProps="lineComProps.xAxisProps"
|
||||||
:formatCallBack="lineComProps.formatCallBack"></lineCom> -->
|
:formatCallBack="lineComProps.formatCallBack"></lineCom>
|
||||||
<barCom :domId="3" :title="barComPropsHorizontal.title" :xAxisProps="barComPropsHorizontal.xAxisProps"
|
<barCom :domId="3" :title="barComPropsHorizontal.title" :xAxisProps="barComPropsHorizontal.xAxisProps"
|
||||||
:xAxisData="barComPropsHorizontal.xAxisData" :yAxisData="barComPropsHorizontal.yAxisData"
|
:xAxisData="barComPropsHorizontal.xAxisData" :yAxisData="barComPropsHorizontal.yAxisData"
|
||||||
:yAxisProps="barComPropsHorizontal.yAxisProps" :seriseData="barComPropsHorizontal.seriseData"
|
:yAxisProps="barComPropsHorizontal.yAxisProps" :seriseData="barComPropsHorizontal.seriseData"
|
||||||
|
|
@ -44,7 +47,7 @@
|
||||||
<div class="echart_cell">
|
<div class="echart_cell">
|
||||||
<hotProvider></hotProvider>
|
<hotProvider></hotProvider>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -54,6 +57,20 @@ import mapEcharts from "../../components/echartsCom/mapEcharts.vue"
|
||||||
import barCom from "../../components/echartsCom/barCom.vue"
|
import barCom from "../../components/echartsCom/barCom.vue"
|
||||||
import Pie3dCom from "../../components/echartsCom/Pie3dCom.vue"
|
import Pie3dCom from "../../components/echartsCom/Pie3dCom.vue"
|
||||||
import hotProvider from "../../components/customCom/hotProvider.vue"
|
import hotProvider from "../../components/customCom/hotProvider.vue"
|
||||||
|
import mapLine from "components/mapBaidu/mapLine.vue"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const lineComProps = reactive({
|
const lineComProps = reactive({
|
||||||
title: "折线图",
|
title: "折线图",
|
||||||
legendDataList: ["Email"],//, "Union Ads", "Video Ads", "Direct", "Search Engine"
|
legendDataList: ["Email"],//, "Union Ads", "Video Ads", "Direct", "Search Engine"
|
||||||
|
|
|
||||||
|
|
@ -71,7 +71,7 @@ export default ({ mode }: any) => {
|
||||||
scss: {
|
scss: {
|
||||||
// 两种方式都可以
|
// 两种方式都可以
|
||||||
additionalData:
|
additionalData:
|
||||||
"@import '@/style/scss/variable.scss';@import '@/style/scss/mixin.scss';@import '@/style/scss/vantReset.scss';"
|
"@import '@/style/scss/index.scss';"
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue