地图设备页面bug修改

This commit is contained in:
tx 2024-08-17 13:42:10 +08:00
parent 21081b8618
commit 345a9cee1b

View File

@ -102,7 +102,7 @@
<script> <script>
import AMapLoader from "@amap/amap-jsapi-loader"; import AMapLoader from "@amap/amap-jsapi-loader";
import globalConfig from "@/utils/config/globalConfig"; import globalConfig from "@/utils/config/globalConfig";
import { getDevice, listDevice,getDeviceLists} from '@/api/system/device' import { getDevice, getDeviceLists ,listDevice} from '@/api/system/device'
import { listArea, optionselect as getAreaOptionselect } from '@/api/system/area' import { listArea, optionselect as getAreaOptionselect } from '@/api/system/area'
import { listParking } from '@/api/system/parking' import { listParking } from '@/api/system/parking'
import LocationMap from '@/components/Map/location/LocationMap' import LocationMap from '@/components/Map/location/LocationMap'
@ -137,17 +137,17 @@ function formarStatus(status, onlineStatus) {
} }
} }
} }
export default { export default {
name: "map-view", name: "map-view",
components: { OrderRecord, RepairRecord, ReplacementRecord, QrCode, LocationMap }, components: { OrderRecord, RepairRecord, ReplacementRecord, QrCode, LocationMap },
data() { data() {
return { return {
AMap: null, AMap: null,
map: null, // map: null,
markers: [], markers: [],
labels: [], labels: [],
tips: null, tips: null,
//
areaList: [], areaList: [],
userName: undefined, userName: undefined,
lon: null, lon: null,
@ -162,21 +162,18 @@ export default {
cluster: null, cluster: null,
data: [], data: [],
show: false, show: false,
//
open2: false, open2: false,
//
form: {}, form: {},
areaId: 14, areaId: 14,
areaOptions: [], areaOptions: [],
infoWindow: null, infoWindow: null,
//
deviceList: [], deviceList: [],
onDeviceList: [], onDeviceList: [],
parkingList: [], parkingList: [],
noParkingList: [], noParkingList: [],
noridingList: [], noridingList: [],
type: null, type: null,
showmap:true, showmap: true,
} }
}, },
mounted() { mounted() {
@ -189,32 +186,33 @@ export default {
this.map?.destroy(); this.map?.destroy();
}, },
methods: { methods: {
async handleAreaChange(newAreaId) { async handleAreaChange(newAreaId) {
console.log('newAreaId:', newAreaId); console.log('newAreaId:', newAreaId);
// areaId this.areaId = newAreaId;
this.areaId = newAreaId; this.onDeviceList = [];
this.onDeviceList = []; this.parkingList = [];
this.parkingList = []; this.noParkingList = [];
this.noParkingList = []; this.noridingList = [];
this.noridingList = []; this.deviceList = [];
this.deviceList=[] this.showmap = false;
//
// if (this.map) { if (this.map) {
// this.map.destroy(); this.map.destroy();
// this.map = null; this.map = null;
// } this.cluster = null;
this.showmap=false }
//
await this.getAreaList(this.areaId); await this.getAreaList(this.areaId);
}, },
getAreaOptions() { getAreaOptions() {
getAreaOptionselect().then(response => { getAreaOptionselect().then(response => {
this.areaOptions = response.data; this.areaOptions = response.data;
console.log("areaOptions", this.areaOptions) console.log("areaOptions", this.areaOptions)
}); });
}, },
onMapGeo(data, lat, lng) { onMapGeo(data, lat, lng) {
console.log("onMapGeo", data) console.log("onMapGeo", data)
let component = data.regeocode.addressComponent; let component = data.regeocode.addressComponent;
@ -228,6 +226,7 @@ export default {
name: component.street + component.streetNumber name: component.street + component.streetNumber
} }
}, },
onSelectChange(addr) { onSelectChange(addr) {
console.log("onSelectChange", addr) console.log("onSelectChange", addr)
let data = addr.selected.data; let data = addr.selected.data;
@ -241,22 +240,18 @@ export default {
name: data.address + data.name, name: data.address + data.name,
} }
}, },
handleSelect(key, keyPath) { handleSelect(key, keyPath) {
this.activeIndex = key; this.activeIndex = key;
console.log(key, keyPath); console.log(key, keyPath);
}, },
showMarkers() { showMarkers() {
if (this.show) { if (this.show) {
// this.markers.forEach(marker => {
// marker.show();
// });
this.labels.forEach(label => { this.labels.forEach(label => {
label.show(); label.show();
}); });
} else { } else {
// this.markers.forEach(marker => {
// marker.hide();
// });
this.labels.forEach(label => { this.labels.forEach(label => {
label.hide(); label.hide();
}); });
@ -267,16 +262,16 @@ export default {
element.style.visibility = this.show ? 'hidden' : 'visible'; element.style.visibility = this.show ? 'hidden' : 'visible';
}); });
}, },
async getAreaList(areaId) { async getAreaList(areaId) {
listArea({ areaId: areaId }).then(response => { listArea({ areaId: areaId }).then(response => {
this.areaList = response.rows; this.areaList = response.rows;
if (this.areaList.length > 0) { // if (this.areaList.length > 0) {
const firstArea = this.areaList[0]; // const firstArea = this.areaList[0];
this.area = firstArea; this.area = firstArea;
// console.log(':', firstArea);
this.lon = firstArea.longitude; this.lon = firstArea.longitude;
this.lat = firstArea.latitude; this.lat = firstArea.latitude;
// console.log("area=============" + JSON.stringify(this.area))
listParking({ areaId: this.area.areaId }).then(response => { listParking({ areaId: this.area.areaId }).then(response => {
let list = response.rows; let list = response.rows;
list.forEach(item => { list.forEach(item => {
@ -288,123 +283,106 @@ export default {
this.noridingList.push(item); this.noridingList.push(item);
} }
}); });
// console.log("parkingList=============" + JSON.stringify(this.parkingList));
// console.log("noParkingList=============" + JSON.stringify(this.noParkingList)); setTimeout(() => {
// console.log("noriding=============" + JSON.stringify(this.noridingList)); this.showmap = true;
setTimeout(() => {
this.showmap=true
this.initAMap(); this.initAMap();
}, 300); }, 300);
}); });
} else { } else {
console.log('区域列表为空'); console.log('区域列表为空');
} }
}); });
}, },
changeMapStyle() { changeMapStyle() {
//
let defaultLayer = new AMap.TileLayer(); let defaultLayer = new AMap.TileLayer();
//
let satelliteLayer = new AMap.TileLayer.Satellite(); let satelliteLayer = new AMap.TileLayer.Satellite();
let roadNetLayer = new AMap.TileLayer.RoadNet(); let roadNetLayer = new AMap.TileLayer.RoadNet();
//
this.map.add(defaultLayer); this.map.add(defaultLayer);
// let currentLayer = this.map.getLayers()[0];
let currentLayer = this.map.getLayers()[0]; //
//
if (this.type == 'default') { if (this.type == 'default') {
console.log(1111111) this.map.setLayers([defaultLayer]);
//
this.map.setLayers([defaultLayer]); //
this.type = 'Satellite'; this.type = 'Satellite';
} else { } else {
console.log(222222) this.map.setLayers([satelliteLayer, roadNetLayer]);
this.map.setLayers([satelliteLayer, roadNetLayer]); //
this.type = 'default'; this.type = 'default';
} }
}, },
setFitView() { setFitView() {
this.map.setFitView(null, false, [150, 60, 100, 60]); this.map.setFitView(null, false, [150, 60, 100, 60]);
}, },
initAMap() {
initAMap() {
AMapLoader.load({ AMapLoader.load({
key: globalConfig.aMap.key, // WebKey load key: globalConfig.aMap.key,
version: "2.0", // JSAPI 1.4.15 version: "2.0",
}).then((AMap) => { }).then((AMap) => {
this.map = new AMap.Map("container", { this.map = new AMap.Map("container", {
// id viewMode: "3D",
viewMode: "3D", // 3D zoom: 13,
zoom: 13, // center: [this.lon, this.lat],
center: [this.lon, this.lat], //
}); });
//
this.infoWindow = new AMap.InfoWindow({ this.infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -30) offset: new AMap.Pixel(0, -30),
}); });
//
console.log("this.areaId=============" + this.areaId)
this.deviceMarker(this.areaId); this.deviceMarker(this.areaId);
//
this.areaList.forEach(area => { this.areaList.forEach(area => {
this.addArea(JSON.parse(area.boundaryStr) || []); this.addArea(JSON.parse(area.boundaryStr) || []);
}); });
//
this.parkingList.forEach(parking => { this.parkingList.forEach(parking => {
this.addParking(JSON.parse(parking.boundaryStr) || [], parking.parkingName, parking.longitude, parking.latitude); this.addParking(JSON.parse(parking.boundaryStr) || [], parking.parkingName, parking.longitude, parking.latitude);
this.addMarker2(parking, "https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh", parking.parkingName, "#1890ff"); this.addMarker2(parking, "https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh", parking.parkingName, "#1890ff");
}); });
//
this.noParkingList.forEach(noparking => { this.noParkingList.forEach(noparking => {
this.addNoParking(JSON.parse(noparking.boundaryStr) || []); this.addNoParking(JSON.parse(noparking.boundaryStr) || []);
this.addMarker2(noparking, "https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab", noparking.parkingName, "#ff4444"); this.addMarker2(noparking, "https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab", noparking.parkingName, "#ff4444");
}); });
//
this.noridingList.forEach(noriding => { this.noridingList.forEach(noriding => {
this.addNoriding(JSON.parse(noriding.boundaryStr) || [], noriding.parkingName, noriding.longitude, noriding.latitude); this.addNoriding(JSON.parse(noriding.boundaryStr) || [], noriding.parkingName, noriding.longitude, noriding.latitude);
this.addMarker2(noriding, "https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2", noriding.parkingName, "#ffcc00"); this.addMarker2(noriding, "https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2", noriding.parkingName, "#ffcc00");
}); });
// setTimeout(() => {
// this.setFitView();
// }, 2000);
}).catch((e) => { }).catch((e) => {
console.log(e); console.log(e);
}); });
}, },
//
freshMarker(points) { freshMarker(points) {
let that = this; let that = this;
console.log("刷新点标记====", points) console.log("刷新点标记====", points);
// points
if (!Array.isArray(points)) { if (!Array.isArray(points)) {
console.error("Points data is not an array"); console.error("Points data is not an array");
return; return;
} }
console.log("this.cluster=======", this.cluster)
//
if (this.cluster) { if (this.cluster) {
console.log('加载了');
try { try {
this.cluster.setData(points); this.cluster.setData(points);
} catch (error) { } catch (error) {
console.error("Error setting cluster data: ", error); console.error("Error setting cluster data: ", error);
} }
} else { } else {
//
this.map.plugin(["AMap.MarkerCluster"], () => { this.map.plugin(["AMap.MarkerCluster"], () => {
that.cluster = new AMap.MarkerCluster( that.cluster = new AMap.MarkerCluster(
this.map, // this.map,
points, // lnglat points,
{ {
styles: this.getStyles(), styles: this.getStyles(),
renderMarker: this.getRenderMarker, // renderMarker: this.getRenderMarker,
} }
); );
// cluster
if (that.cluster) { if (that.cluster) {
console.log("Cluster 初始化成功"); console.log("Cluster 初始化成功");
that.cluster.on('click', that.onClickCluster); that.cluster.on('click', that.onClickCluster);
@ -414,18 +392,17 @@ export default {
}); });
} }
}, },
//
onClickCluster(e) { onClickCluster(e) {
console.log("点击聚合点====", e) console.log("点击聚合点====", e)
this.onDeviceList = e.clusterData.map(item => item); this.onDeviceList = e.clusterData.map(item => item);
// > 1
if (this.onDeviceList.length > 1) { if (this.onDeviceList.length > 1) {
console.log("打开列表====", this.onDeviceList)
let content = this.generateInfoContent(this.onDeviceList); let content = this.generateInfoContent(this.onDeviceList);
this.infoWindow.setContent(content); this.infoWindow.setContent(content);
this.infoWindow.open(this.map, e.lnglat); this.infoWindow.open(this.map, e.lnglat);
} }
}, },
generateInfoContent(data) { generateInfoContent(data) {
let content = `<div style="max-hight: 500px; overflow-y: auto;"> let content = `<div style="max-hight: 500px; overflow-y: auto;">
<table class="info-table"> <table class="info-table">
@ -489,30 +466,32 @@ export default {
return content; return content;
}, },
handleInfoWindowClick(event) { handleInfoWindowClick(event) {
console.log("点击详情按钮====", event) console.log("点击详情按钮====", event);
const button = event.target.closest('.detail-btn'); const button = event.target.closest('.detail-btn');
if (button) { if (button) {
const deviceId = button.getAttribute('data-device-id'); const deviceId = button.getAttribute('data-device-id');
this.onClickMarker(deviceId); this.onClickMarker(deviceId);
} }
}, },
//
getRenderMarker(context) { getRenderMarker(context) {
console.log('调用了 getRenderMarker');
let device = context.data[0]; let device = context.data[0];
let content = ` let content = `
<div class="apiary-marker"> <div class="apiary-marker">
<div style="visibility: ${this.show ? 'hidden' : 'visible'};" class="apiary-marker-name">${device.vehicleNum}</div> <div style="visibility: ${this.show ? 'hidden' : 'visible'};" class="apiary-marker-name">${device.vehicleNum}</div>
<image class="apiary-marker-img" src='${formarStatus(device.status, device.onlineStatus)}'/> <image class="apiary-marker-img" src='${formarStatus(device.status, device.onlineStatus)}'/>
</div> </div>
` `;
context.marker.setContent(content); context.marker.setContent(content);
context.marker.on("click", () => this.onClickMarker(device.deviceId)); context.marker.on("click", () => this.onClickMarker(device.deviceId));
}, },
//
onClickMarker(deviceId) { onClickMarker(deviceId) {
console.log("点击非聚合点====", deviceId) console.log("点击非聚合点====", deviceId);
getDevice(deviceId).then(response => { getDevice(deviceId).then(response => {
this.open2 = true; this.open2 = true;
this.form = response.data; this.form = response.data;
@ -520,8 +499,9 @@ export default {
this.key++; this.key++;
}); });
}, },
openDetail(deviceId) { openDetail(deviceId) {
console.log("点击非聚合点====", deviceId) console.log("点击非聚合点====", deviceId);
getDevice(deviceId).then(response => { getDevice(deviceId).then(response => {
this.open2 = true; this.open2 = true;
this.form = response.data; this.form = response.data;
@ -529,38 +509,34 @@ export default {
this.key++; this.key++;
}); });
}, },
getStyles() { getStyles() {
return [ return [
{ {
//1-10 url: "//a.amap.com/jsapi_demos/static/images/blue.png",
url: "//a.amap.com/jsapi_demos/static/images/blue.png", // size: new AMap.Size(32, 32),
size: new AMap.Size(32, 32), // offset: new AMap.Pixel(-16, -16),
offset: new AMap.Pixel(-16, -16), // textColor: "#fff",
textColor: "#fff", //
}, },
{ {
//11-100
url: "//a.amap.com/jsapi_demos/static/images/green.png", url: "//a.amap.com/jsapi_demos/static/images/green.png",
size: new AMap.Size(32, 32), size: new AMap.Size(32, 32),
offset: new AMap.Pixel(-16, -16), offset: new AMap.Pixel(-16, -16),
textColor: "#fff", textColor: "#fff",
}, },
{ {
//101-1000
url: "//a.amap.com/jsapi_demos/static/images/orange.png", url: "//a.amap.com/jsapi_demos/static/images/orange.png",
size: new AMap.Size(36, 36), size: new AMap.Size(36, 36),
offset: new AMap.Pixel(-18, -18), offset: new AMap.Pixel(-18, -18),
textColor: "#fff" textColor: "#fff"
}, },
{ {
//1001-10000
url: "//a.amap.com/jsapi_demos/static/images/red.png", url: "//a.amap.com/jsapi_demos/static/images/red.png",
size: new AMap.Size(48, 48), size: new AMap.Size(48, 48),
offset: new AMap.Pixel(-24, -24), offset: new AMap.Pixel(-24, -24),
textColor: "#fff" textColor: "#fff"
}, },
{ {
//10001-100000
url: "//a.amap.com/jsapi_demos/static/images/red.png", url: "//a.amap.com/jsapi_demos/static/images/red.png",
size: new AMap.Size(48, 48), size: new AMap.Size(48, 48),
offset: new AMap.Pixel(-24, -24), offset: new AMap.Pixel(-24, -24),
@ -568,13 +544,14 @@ export default {
}, },
] ]
}, },
addMarker2(parking, icon, title, color) { addMarker2(parking, icon, title, color) {
let marker = new AMap.Marker({ let marker = new AMap.Marker({
map: this.map, map: this.map,
icon: new AMap.Icon({ icon: new AMap.Icon({
image: icon, image: icon,
size: new AMap.Size(25, 36), // size: new AMap.Size(25, 36),
imageSize: new AMap.Size(25, 36) // imageSize: new AMap.Size(25, 36)
}), }),
position: [parking.longitude, parking.latitude], position: [parking.longitude, parking.latitude],
offset: new AMap.Pixel(-12.5, -36) offset: new AMap.Pixel(-12.5, -36)
@ -582,36 +559,32 @@ export default {
this.markers.push(marker); this.markers.push(marker);
// console.log("title============="+title)
// Text
let text = new AMap.Text({ let text = new AMap.Text({
text: title, text: title,
anchor: 'center', // anchor: 'center',
position: [parking.longitude, parking.latitude], position: [parking.longitude, parking.latitude],
offset: new AMap.Pixel(0, -50), offset: new AMap.Pixel(0, -50),
style: { style: {
'background-color': color, // 'background-color': color,
'border': 'none', // 'border': 'none',
'border-radius': '5px', // 5px 'border-radius': '5px',
'color': 'white', // 'color': 'white',
'font-size': '12px', // 'font-size': '12px',
} }
}); });
//
this.map.add(text); this.map.add(text);
// console.log("text=============",text) this.labels.push(text);
this.labels.push(text)
}, },
deviceMarker(areaId) { deviceMarker(areaId) {
this.data = []; this.data = [];
console.log(areaId,'areaIdareaId'); listDevice({ pageNum: 1, pageSize: 999, areaId: areaId }).then(response => {
getDeviceLists(areaId).then(response => { // getDeviceLists(areaId).then(response => {
this.deviceList = response.data; this.deviceList = response.rows;
this.deviceList.forEach(device => { this.deviceList.forEach(device => {
//
if (device.longitude !== null && device.latitude !== null && if (device.longitude !== null && device.latitude !== null &&
!isNaN(device.longitude) && !isNaN(device.latitude)) { !isNaN(device.longitude) && !isNaN(device.latitude)) {
this.data.push({ this.data.push({
lnglat: [device.longitude, device.latitude], lnglat: [device.longitude, device.latitude],
status: device.status, status: device.status,
@ -620,24 +593,50 @@ export default {
vehicleNum: device.vehicleNum, vehicleNum: device.vehicleNum,
deviceId: device.deviceId deviceId: device.deviceId
}); });
this.addMarker(device.longitude, device.latitude, device.status, device.onlineStatus,device.sn);
} else { } else {
console.warn(`无效的经纬度值: 经度=${device.longitude}, 纬度=${device.latitude}`); console.warn(`无效的经纬度值: 经度=${device.longitude}, 纬度=${device.latitude}`);
} }
}); });
// console.log(this.data,'this.datathis.datathis.data');
this.freshMarker(this.data); this.freshMarker(this.data);
}).catch(error => { }).catch(error => {
console.error('获取设备列表失败:', error); console.error('获取设备列表失败:', error);
}); });
}, },
addMarker(lng, lat, status, onlineStatus, title) { addMarker(lng, lat, status, onlineStatus, title) {
let marker = new AMap.Marker({
map: this.map,
icon: new AMap.Icon({
image: icon,
size: new AMap.Size(25, 36),
imageSize: new AMap.Size(25, 36)
}),
position: [lng, lat],
offset: new AMap.Pixel(-12.5, -36)
});
this.markers.push(marker);
let text = new AMap.Text({
text: title,
anchor: 'center',
position: [lng, lat],
offset: new AMap.Pixel(0, -50),
style: {
'background-color': 'color',
'border': 'none',
'border-radius': '5px',
'color': 'white',
'font-size': '12px',
}
});
this.map.add(text);
this.labels.push(text);
}, },
//
addArea(data) { addArea(data) {
let polygon = new AMap.Polygon({ let polygon = new AMap.Polygon({
path: data, path: data,
@ -649,78 +648,69 @@ export default {
strokeStyle: 'dashed', strokeStyle: 'dashed',
strokeDasharray: [5, 5], strokeDasharray: [5, 5],
}); });
// polygon.on('mouseover', () => {
// polygon.setOptions({
// fillOpacity: 0.7,
// fillColor: '#7bccc4'
// })
// })
// polygon.on('mouseout', () => {
// polygon.setOptions({
// fillOpacity: 0.5,
// fillColor: '#ccebc5'
// })
// })
this.map.add(polygon); this.map.add(polygon);
}, },
addParking(data, title, lon, lat) { addParking(data, title, lon, lat) {
let polygon = new AMap.Polygon({ let polygon = new AMap.Polygon({
path: data, path: data,
fillColor: '#ccebc5', fillColor: '#ccebc5',
strokeOpacity: 1, strokeOpacity: 1,
fillOpacity: 0.5, fillOpacity: 0.5,
strokeColor: '#3b7ed9', // strokeColor: '#3b7ed9',
strokeWeight: 2, // strokeWeight: 2,
strokeStyle: 'solid', strokeStyle: 'solid',
strokeDasharray: [5, 5], strokeDasharray: [5, 5],
}); });
polygon.on('mouseover', () => { polygon.on('mouseover', () => {
polygon.setOptions({ polygon.setOptions({
fillOpacity: 0.7, fillOpacity: 0.7,
fillColor: '#71b7cc' // fillColor: '#71b7cc'
}); });
}); });
polygon.on('mouseout', () => { polygon.on('mouseout', () => {
polygon.setOptions({ polygon.setOptions({
fillOpacity: 0.5, fillOpacity: 0.5,
fillColor: '#a7c1d0' // fillColor: '#a7c1d0'
}); });
}); });
this.map.add(polygon); this.map.add(polygon);
}, },
addNoParking(data) { addNoParking(data) {
let polygon = new AMap.Polygon({ let polygon = new AMap.Polygon({
path: data, path: data,
fillColor: '#ccebc5', fillColor: '#ccebc5',
strokeOpacity: 1, strokeOpacity: 1,
fillOpacity: 0.5, fillOpacity: 0.5,
strokeColor: '#ff0000', // strokeColor: '#ff0000',
strokeWeight: 2, // strokeWeight: 2,
strokeStyle: 'solid', strokeStyle: 'solid',
strokeDasharray: [5, 5], strokeDasharray: [5, 5],
}); });
polygon.on('mouseover', () => { polygon.on('mouseover', () => {
polygon.setOptions({ polygon.setOptions({
fillOpacity: 0.7, fillOpacity: 0.7,
fillColor: '#ff0000' // fillColor: '#ff0000'
}); });
}); });
polygon.on('mouseout', () => { polygon.on('mouseout', () => {
polygon.setOptions({ polygon.setOptions({
fillOpacity: 0.5, fillOpacity: 0.5,
fillColor: '#cc7b7b' // fillColor: '#cc7b7b'
}); });
}); });
this.map.add(polygon); this.map.add(polygon);
}, },
addNoriding(data, title, lon, lat) { addNoriding(data, title, lon, lat) {
let polygon = new AMap.Polygon({ let polygon = new AMap.Polygon({
path: data, path: data,
fillColor: '#ccebc5', fillColor: '#ccebc5',
strokeOpacity: 1, strokeOpacity: 1,
fillOpacity: 0.5, fillOpacity: 0.5,
strokeColor: '#ffcc00', // strokeColor: '#ffcc00',
strokeWeight: 2, // strokeWeight: 2,
strokeStyle: 'solid', strokeStyle: 'solid',
strokeDasharray: [5, 5], strokeDasharray: [5, 5],
}); });
@ -741,6 +731,7 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#container { #container {
width: 100%; width: 100%;