bonus
/
BigScreenUI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

页面搭建

This commit is contained in:
13218645326 2023-11-30 18:37:22 +08:00
parent 06094b0b3d
commit d90568e4b8
29 changed files with 422 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components.d.ts vendored
View File

@ -9,6 +9,8 @@ declare module 'vue' {
export interface GlobalComponents {
BarCom: typeof import('./src/components/echartsCom/barCom.vue')['default']
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']
HotProvider: typeof import('./src/components/customCom/hotProvider.vue')['default']
LineCom: typeof import('./src/components/echarts/lineCom.vue')['default']

3
env.d.ts vendored
View File

@ -1,2 +1,3 @@
/// <reference types="vite/client" />
declare module "nprogress"
declare module "nprogress"
declare module "BMap"

6
env/.env vendored
View File

@ -1,4 +1,8 @@
# port 端口号
VITE_PORT = 8888
# 自动打开浏览器
VITE_OPEN = true
VITE_OPEN = true
# 百度地图key
VITE_AK = "cClgLBaLgGUdQDilX9dGvieL"
# 百度地图版本
VITE_AK_v = "2"

7
env/.env.dev vendored
View File

@ -3,4 +3,9 @@ VITE_ENV = 'development'
VITE_BUILD_MODE = 'dev'
# 开发环境接口地址
VITE_API_URL = '/proxyApi'
VITE_API_URL = '/proxyApi'
# 百度地图key
VITE_AK = "cClgLBaLgGUdQDilX9dGvieL"
# 百度地图版本
VITE_AK_v = "2"

6
env/.env.production vendored
View File

@ -3,4 +3,8 @@ VITE_ENV = 'production'
VITE_BUILD_MODE = 'prod'
# 线上环境接口地址
VITE_API_URL = 'https://production.com'
VITE_API_URL = 'https://production.com'
# 百度地图key
VITE_AK = "cClgLBaLgGUdQDilX9dGvieL"
# 百度地图版本
VITE_AK_v = "2"

6
env/.env.sit vendored
View File

@ -3,4 +3,8 @@ VITE_ENV = 'production'
VITE_BUILD_MODE = 'sit'
# 线上环境接口地址
VITE_API_URL = 'https://testSit.com'
VITE_API_URL = 'https://testSit.com'
# 百度地图key
VITE_AK = "cClgLBaLgGUdQDilX9dGvieL"
# 百度地图版本
VITE_AK_v = "2"

6
env/.env.uat vendored
View File

@ -4,4 +4,8 @@ VITE_ENV = 'production'
VITE_BUILD_MODE = 'uat'
# 线上环境接口地址
VITE_API_URL = 'https://testUat.com'
VITE_API_URL = 'https://testUat.com'
# 百度地图key
VITE_AK = "cClgLBaLgGUdQDilX9dGvieL"
# 百度地图版本
VITE_AK_v = "2"

1
index.html
View File

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>

48
pnpm-lock.yaml
View File

@ -47,6 +47,9 @@ dependencies:
vue:
specifier: ^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:
specifier: ^4.2.5
version: 4.2.5(vue@3.3.4)
@ -1015,6 +1018,32 @@ packages:
resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
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:
resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
dev: false
@ -2139,6 +2168,10 @@ packages:
source-map-support: 0.5.21
dev: false
/tiny-emitter@2.1.0:
resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==}
dev: false
/to-fast-properties@2.0.0:
resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
engines: {node: '>=4'}
@ -2346,6 +2379,21 @@ packages:
optionalDependencies:
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):
resolution: {integrity: sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==}
engines: {node: '>=12'}

2
src/App.vue
View File

@ -2,6 +2,8 @@
<RouterView />
</template>
<script setup lang="ts">
</script>
<style lang="scss">

BIN
src/assets/img/mapBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
src/assets/img/mapCurrent.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
src/assets/img/mapEnd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
src/assets/img/mapStart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

3
src/assets/styles/index.scss
View File

@ -1,3 +0,0 @@
@import '@/assets/styles/reset/reset.scss';
@import '@/assets/styles/nprogress.scss';
@import '@/assets/styles/common.scss';

43
src/assets/styles/reset/reset.scss
View File

@ -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
src/assets/styles/variables.scss
View File

@ -1 +0,0 @@
$main-color: #22b2ff;

136
src/components/customCom/equipmentDialog.vue Normal file
View File

@ -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>

3
src/components/customCom/equipmentLeasing.vue
View File

@ -19,13 +19,14 @@
</div>
</div>
<equipmentDialog></equipmentDialog>
</div>
</template>
<script setup lang="ts">
import { getImg } from "@/utils/index"
import mapEcharts from "../echartsCom/mapEcharts.vue"
import equipmentDialog from "./equipmentDialog.vue"
const navInfo = reactive({
list: [
{

71
src/components/mapBaidu/index.html Normal file
View File

@ -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>

105
src/components/mapBaidu/mapLine.vue
View File

@ -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>

BIN
src/components/mapBaidu/mapStart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

5
src/main.ts
View File

@ -11,12 +11,7 @@ import highcharts from 'highcharts';
import highcharts3d from 'highcharts/highcharts-3d';
// 调用3d图表
highcharts3d(highcharts);
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: 'U4Bn9fW4tEtgEOtQ29cTpIBm47Ey4LCX'//百度地图密钥
});
const app = createApp(App)
app.use(createPinia())

0
src/assets/styles/common.scss → src/style/scss/common.scss
View File

5
src/style/scss/index.scss Normal file
View File

@ -0,0 +1,5 @@
@import './variable.scss';
@import './mixin.scss';
@import './common.module.scss';
@import './nprogress.scss';
@import './common.scss';

0
src/assets/styles/nprogress.scss → src/style/scss/nprogress.scss
View File

4
src/style/scss/vantReset.scss
View File

@ -1,4 +0,0 @@
.van-button--primary {
background-color: $main-color;
border: $main-color;
}

25
src/views/echarts/index.vue
View File

@ -1,12 +1,15 @@
<template>
<div class="out_echart">
<div class="echart_row_1">
<mapLine></mapLine>
<!-- <div class="echart_row_1">
<div class="echart_cell">
<!-- <lineCom :title="lineComProps.title" :legendDataList="lineComProps.legendDataList"
<lineCom :title="lineComProps.title" :legendDataList="lineComProps.legendDataList"
:FeatureList="lineComProps.FeatureList" :xAxisData="lineComProps.xAxisData"
:seriesMultipleFlag="lineComProps.seriesMultipleFlag" :seriseMultipleName="lineComProps.seriseMultipleName"
:seriseMultipleData="lineComProps.seriseMultipleData" :xAxisProps="lineComProps.xAxisProps"
:formatCallBack="lineComProps.formatCallBack"></lineCom> -->
:formatCallBack="lineComProps.formatCallBack"></lineCom>
<barCom :domId="3" :title="barComPropsHorizontal.title" :xAxisProps="barComPropsHorizontal.xAxisProps"
:xAxisData="barComPropsHorizontal.xAxisData" :yAxisData="barComPropsHorizontal.yAxisData"
:yAxisProps="barComPropsHorizontal.yAxisProps" :seriseData="barComPropsHorizontal.seriseData"
@ -44,7 +47,7 @@
<div class="echart_cell">
<hotProvider></hotProvider>
</div>
</div>
</div> -->
</div>
</template>
@ -54,6 +57,20 @@ import mapEcharts from "../../components/echartsCom/mapEcharts.vue"
import barCom from "../../components/echartsCom/barCom.vue"
import Pie3dCom from "../../components/echartsCom/Pie3dCom.vue"
import hotProvider from "../../components/customCom/hotProvider.vue"
import mapLine from "components/mapBaidu/mapLine.vue"
const lineComProps = reactive({
title: "折线图",
legendDataList: ["Email"],//, "Union Ads", "Video Ads", "Direct", "Search Engine"

2
vite.config.ts
View File

@ -71,7 +71,7 @@ export default ({ mode }: any) => {
scss: {
// 两种方式都可以
additionalData:
"@import '@/style/scss/variable.scss';@import '@/style/scss/mixin.scss';@import '@/style/scss/vantReset.scss';"
"@import '@/style/scss/index.scss';"
}
}