autumn/jsowell-charger-web
1
0
Fork 0
mirror of https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git synced 2026-06-13 11:49:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
JS-LM
2023-05-10 09:16:09 +08:00
parent d2eed9ad3a
commit e89a9ebba5
4 changed files with 109 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
jsowell-ui/src/components/MapContainer/MapContainer.vue
View File

@@ -43,6 +43,7 @@ window._AMapSecurityConfig = {
securityJsCode: "829b6b73f84682c2eb982eaa47a745b8", securityJsCode: "829b6b73f84682c2eb982eaa47a745b8",
}; };
export default { export default {
props:['stationLat','stationLng'],
data() { data() {
return { return {
dialogImageUrl: '', dialogImageUrl: '',
@@ -68,7 +69,6 @@ export default {
}; };
}, },
methods: { methods: {
// 点击搜索按钮 // 点击搜索按钮
send() { send() {
this.searchPlaceInput = this.inputObject.userInput; this.searchPlaceInput = this.inputObject.userInput;
@@ -76,16 +76,16 @@ export default {
// 向表单 site-info传值 // 向表单 site-info传值
bus.$emit("inp", this.searchPlaceInput); bus.$emit("inp", this.searchPlaceInput);
}, },
queryStationInfo() { // queryStationInfo() {
getStation(this.stationId).then((response) => { // getStation(this.stationId).then((response) => {
this.lat = response.data.stationLat; // this.lat = response.data.stationLat;
this.lng = response.data.stationLng; // this.lng = response.data.stationLng;
console.log(this.lat, this.lng); // console.log(this.lat, this.lng);
this.initMap(this.lat, this.lng); // this.initMap(this.lat, this.lng);
}); // });
}, // },
initMap(lat, lng) { initMap() {
// console.log(lat, lng); // console.log(lat, lng);
AMapLoader.load({ AMapLoader.load({
key: "61436c9c789d301a5b73853d176710cf", // 申请好的Web端开发者Key，首次调用 load 时必填 key: "61436c9c789d301a5b73853d176710cf", // 申请好的Web端开发者Key，首次调用 load 时必填
@@ -97,7 +97,7 @@ export default {
//设置地图容器id //设置地图容器id
viewMode: "3D", //是否为3D地图模式 viewMode: "3D", //是否为3D地图模式
zoom: 15, //初始化地图级别 zoom: 15, //初始化地图级别
center: [+lng, +lat], //初始化地图中心点位置 center: [+this.stationLng, +this.stationLat], //初始化地图中心点位置
}); });
// this.map.addControl(new AMap.Geolocation()); // this.map.addControl(new AMap.Geolocation());
// console.log("map", this.map); // console.log("map", this.map);
@@ -105,12 +105,12 @@ export default {
this.map.setDefaultCursor("pointer"); this.map.setDefaultCursor("pointer");
// 点标记 // 点标记
let marker = new AMap.Marker({ let marker = new AMap.Marker({
position: new AMap.LngLat(+lng, +lat), position: new AMap.LngLat(+this.stationLng, +this.stationLat),
}); });
// 将创建的点标记添加到已有的地图实例 // 将创建的点标记添加到已有的地图实例
this.map.add(marker); this.map.add(marker);
AMap.plugin("AMap.AutoComplete", function () { AMap.plugin("AMap.AutoComplete", function () {
auto = new AMap.AutoComplete(this.autoOptions); let auto = new AMap.AutoComplete(this.autoOptions);
//构造地点查询类 //构造地点查询类
auto.on("select", this.select); auto.on("select", this.select);
}); });
@@ -170,29 +170,10 @@ export default {
} }
}); });
}, },
onFileChange(e) {
console.log(e,'上传图片')
// 1.获取用户选择的文件列表
const fileList = e.target.files;
console.log(fileList);
// 2.判断有没有选中图片
if (fileList.length !== 0) {
// 3.选择了图片
const reader = new FileReader();
reader.readAsDataURL(fileList[0]);
// 监听load事件,读取完成触发回调函数
reader.addEventListener("load", () => {
this.avatar = reader.result;
});
} else {
// 没有选择图片
this.avatar = "";
}
},
}, },
mounted() { mounted() {
//DOM初始化完成进行地图初始化 //DOM初始化完成进行地图初始化
// this.queryStationInfo(); // this.queryStationInfo()
}, },
created() { created() {
// this.send(); // this.send();

109
jsowell-ui/src/views/homeIndex/homeIndex.vue
View File

@@ -1,11 +1,61 @@
<template> <template>
<div> <div>
<h1>电桩</h1>
<hr />
<el-table
stripe
border
:data="tableData"
style="width: 100%">
<el-table-column
label="序号"
type="index"
>
</el-table-column>
<el-table-column
prop="pileSn"
label="编号">
</el-table-column>
<el-table-column
prop="stationName"
label="名称"
>
</el-table-column>
<el-table-column
prop="stationAddress"
label="电站">
</el-table-column>
<el-table-column
prop="type"
label="接口">
</el-table-column>
<el-table-column
prop="power"
label="功率">
</el-table-column>
<el-table-column
prop="degree"
label="度数">
</el-table-column>
<el-table-column
prop="electricityPrice"
label="电费">
</el-table-column>
<el-table-column
prop="servicePrice"
label="服务费">
</el-table-column>
<el-table-column
prop="chargingNumber"
label="充电次数">
</el-table-column>
</el-table>
<h1>概况</h1> <h1>概况</h1>
<hr /> <hr />
<el-row type="flex" class="row-bg" justify="space-between"> <el-row :gutter="24">
<el-col :span="7"> <el-col :span="4" :xs="24">
<div class="box"> <div class="box">
<p>总充电电量</p> <div>总充电电量</div>
<div class="box-text"> <div class="box-text">
<b class="box-h1">{{ generalSituation.totalChargingDegree }}</b> <b class="box-h1">{{ generalSituation.totalChargingDegree }}</b>
<i>度</i> <i>度</i>
@@ -17,9 +67,9 @@
<div class="progress"></div> <div class="progress"></div>
</div> </div>
</el-col> </el-col>
<el-col :span="7"> <el-col :span="4" :xs="24">
<div class="box"> <div class="box">
<p>总充电费用</p> <div>总充电费用</div>
<div class="box-text"> <div class="box-text">
<b class="box-h1">{{ generalSituation.totalChargingAmount }}</b> <b class="box-h1">{{ generalSituation.totalChargingAmount }}</b>
<i>元</i> <i>元</i>
@@ -32,9 +82,9 @@
<div class="progress"></div> <div class="progress"></div>
</div> </div>
</el-col> </el-col>
<el-col :span="7"> <el-col :span="4" :xs="24">
<div class="box"> <div class="box">
<p>总充电订单数</p> <div>总充电订单数</div>
<div class="box-text"> <div class="box-text">
<b class="box-h1">{{ generalSituation.totalChargingQuantity }}</b> <b class="box-h1">{{ generalSituation.totalChargingQuantity }}</b>
<i>笔</i> <i>笔</i>
@@ -46,11 +96,9 @@
<div class="progress"></div> <div class="progress"></div>
</div> </div>
</el-col> </el-col>
</el-row> <el-col :span="4" :xs="24">
<el-row type="flex" class="row-bg" justify="space-between">
<el-col :span="7">
<div class="box"> <div class="box">
<p>总充电设备数量</p> <div>总充电设备数量</div>
<div class="box-text"> <div class="box-text">
<b class="box-h1">{{ generalSituation.totalPileQuantity }}</b> <b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>
<i>座</i> <i>座</i>
@@ -62,9 +110,9 @@
<div class="progress"></div> <div class="progress"></div>
</div> </div>
</el-col> </el-col>
<el-col :span="7" v-hasRole="['admin', 'common']"> <el-col :span="4" :xs="24" v-hasRole="['admin', 'common']">
<div class="box"> <div class="box" >
<p>总客户余额</p> <div>总客户余额</div>
<div class="box-text"> <div class="box-text">
<b class="box-h1">{{ generalSituation.totalMemberAmount }}</b> <b class="box-h1">{{ generalSituation.totalMemberAmount }}</b>
<i>元</i> <i>元</i>
@@ -74,13 +122,18 @@
></el-image> ></el-image>
</div> </div>
<div class="progress"></div></div <div class="progress"></div></div
></el-col> >
<el-col :span="7"> </el-col>
<div class="box" style="background-color: #ffffff"> <el-col :span="4" :xs="24">
<p>总充电电量</p> <div class="box">
<div>总服务费金额</div>
<div class="box-text"> <div class="box-text">
<b class="box-h1">{{ generalSituation.totalMemberAmount }}</b> <b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>
<i>元</i> <i>元</i>
<el-image
style="width: 80px; height: 80px"
:src="require('@/assets/images/shebei.png')"
></el-image>
</div> </div>
<div class="progress"></div> <div class="progress"></div>
</div> </div>
@@ -110,6 +163,18 @@ export default {
chart: null, chart: null,
generalSituation: {}, generalSituation: {},
orderInfo: [], orderInfo: [],
tableData: [{
pileSn:'9527',
stationName:'举视充电桩',
stationAddress:'昆山市黄埔江南路',
type:'直流',
power:'2131',
degree:'215',
electricityPrice:'565',
servicePrice:'9274',
chargingNumber:'624',
}]
}; };
}, //图表实例 }, //图表实例
created() { created() {
@@ -363,12 +428,8 @@ export default {
</script> </script>
<style> <style>
.row-bg {
margin-bottom: 20px;
}
.box { .box {
/*height: 100%;*/ padding: 10px;
padding: 16px 22px;
font-size: 18px; font-size: 18px;
color: #ffffff; color: #ffffff;
background-color: #1ab3b3; background-color: #1ab3b3;

1
jsowell-ui/src/views/pile/station/components/SiteInfo.vue
View File

@@ -195,6 +195,7 @@ export default {
dicts: ["station_type", "match_cars", "construction_type"], dicts: ["station_type", "match_cars", "construction_type"],
data() { data() {
return { return {
dialogVisible:false,
headers: { headers: {
Authorization: "Bearer " + getToken() Authorization: "Bearer " + getToken()
}, },

13
jsowell-ui/src/views/pile/station/detail.vue
View File

@@ -16,7 +16,7 @@
<el-tab-pane label="基本资料" name="stationInfo"> <el-tab-pane label="基本资料" name="stationInfo">
<div class="over"> <div class="over">
<div id="map_wrap"> <div id="map_wrap">
<MapContainer ref="map"/> <MapContainer ref="map" :stationLat="stationLat" :stationLng="stationLng"/>
</div> </div>
<div class="menu"> <div class="menu">
<site-info ref="stationInfo"/> <site-info ref="stationInfo"/>
@@ -98,7 +98,9 @@ export default {
dialogFormVisible: false, dialogFormVisible: false,
stationId: this.$route.params.id, stationId: this.$route.params.id,
stationName: this.$route.params.stationName, stationName: this.$route.params.stationName,
stationDetail: {} stationDetail: {},
stationLat:null,
stationLng:null
}; };
}, },
created() { created() {
@@ -128,7 +130,7 @@ export default {
} else if (name === "billing") { } else if (name === "billing") {
this.$refs.billing.getStationBillingTemplateList(); this.$refs.billing.getStationBillingTemplateList();
} else if (name === "stationInfo") { } else if (name === "stationInfo") {
this.$refs.map.queryStationInfo(); this.$refs.map.initMap();
this.$refs.stationInfo.queryStationInfo(); this.$refs.stationInfo.queryStationInfo();
} else if (name === "order") { } else if (name === "order") {
this.$refs.order.dataLoading(); this.$refs.order.dataLoading();
@@ -137,8 +139,11 @@ export default {
queryStationInfo() { queryStationInfo() {
console.log("stationId", this.stationId); console.log("stationId", this.stationId);
getStationInfo(this.stationId).then((res) => { getStationInfo(this.stationId).then((res) => {
console.log(res); // console.log(res);
this.stationDetail = res.data; this.stationDetail = res.data;
this.stationLat = res.data.stationLat
this.stationLng = res.data.stationLng
console.log(this.stationLat,this.stationLng,"父组件里面的经纬度")
}); });
console.log("queryStationInfo==", this.stationDetail); console.log("queryStationInfo==", this.stationDetail);
}, },