zhanghuiqing
/
official_revision
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

删除google组件

dev
X 4 years ago
parent
883ab7ca22
commit
1a5502bc5d
6 changed files with 0 additions and 723 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -2
      package.json
  2. +0
    -654
      src/components/ReportMap.vue
  3. +0
    -23
      src/global-components/GoogleMapLoader.vue
  4. +0
    -12
      src/global-components/index.js
  5. +0
    -20
      src/views/Dashboard.vue
  6. +0
    -12
      yarn.lock

+ 0
- 2
package.json View File

@@ -24,14 +24,12 @@
"@ckeditor/ckeditor5-paragraph": "^21.0.0", "@ckeditor/ckeditor5-paragraph": "^21.0.0",
"@ckeditor/ckeditor5-theme-lark": "^21.0.0", "@ckeditor/ckeditor5-theme-lark": "^21.0.0",
"@ckeditor/ckeditor5-vue": "^1.0.1", "@ckeditor/ckeditor5-vue": "^1.0.1",
"@google/markerclusterer": "^2.0.8",
"@popperjs/core": "^2.4.4", "@popperjs/core": "^2.4.4",
"cash-dom": "^8.0.0", "cash-dom": "^8.0.0",
"chart.js": "^2.9.3", "chart.js": "^2.9.3",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"dayjs": "^1.8.29", "dayjs": "^1.8.29",
"feather-icons": "^4.28.0", "feather-icons": "^4.28.0",
"google-maps-api-loader": "^1.1.1",
"highlight.js": "^10.1.1", "highlight.js": "^10.1.1",
"js-beautify": "^1.11.0", "js-beautify": "^1.11.0",
"litepicker": "^1.5.7", "litepicker": "^1.5.7",


+ 0
- 654
src/components/ReportMap.vue View File

@@ -1,654 +0,0 @@
<script>
import GoogleMapLoader from "@/global-components/GoogleMapLoader";
import MarkerClusterer from "@google/markerclusterer";

export default {
extends: GoogleMapLoader,
data() {
return {
apiKey: "",
center: {
lat: -6.2425342,
lng: 106.8626478
}
};
},
computed: {
darkMode() {
return this.$store.state.main.darkMode;
}
},
watch: {
darkMode() {
this.init();
}
},
mounted() {
this.init();
},
methods: {
async init() {
let self = this;
var lightStyle = [
{
elementType: "geometry",
stylers: [
{
color: "#f5f5f5"
}
]
},
{
elementType: "labels.icon",
stylers: [
{
visibility: "off"
}
]
},
{
elementType: "labels.text.fill",
stylers: [
{
color: "#616161"
}
]
},
{
elementType: "labels.text.stroke",
stylers: [
{
color: "#f5f5f5"
}
]
},
{
featureType: "administrative.land_parcel",
elementType: "labels",
stylers: [
{
visibility: "off"
}
]
},
{
featureType: "administrative.land_parcel",
elementType: "labels.text.fill",
stylers: [
{
color: "#bdbdbd"
}
]
},
{
featureType: "poi",
elementType: "geometry",
stylers: [
{
color: "#eeeeee"
}
]
},
{
featureType: "poi",
elementType: "labels.text",
stylers: [
{
visibility: "off"
}
]
},
{
featureType: "poi",
elementType: "labels.text.fill",
stylers: [
{
color: "#757575"
}
]
},
{
featureType: "poi.park",
elementType: "geometry",
stylers: [
{
color: "#e5e5e5"
}
]
},
{
featureType: "poi.park",
elementType: "geometry.fill",
stylers: [
{
visibility: "off"
}
]
},
{
featureType: "poi.park",
elementType: "labels.text.fill",
stylers: [
{
color: "#9e9e9e"
}
]
},
{
featureType: "road",
elementType: "geometry",
stylers: [
{
color: "#ffffff"
}
]
},
{
featureType: "road.arterial",
elementType: "labels",
stylers: [
{
visibility: "off"
}
]
},
{
featureType: "road.arterial",
elementType: "labels.text.fill",
stylers: [
{
color: "#757575"
}
]
},
{
featureType: "road.highway",
elementType: "geometry",
stylers: [
{
color: "#dadada"
}
]
},
{
featureType: "road.highway",
elementType: "labels",
stylers: [
{
visibility: "off"
}
]
},
{
featureType: "road.highway",
elementType: "labels.text.fill",
stylers: [
{
color: "#616161"
}
]
},
{
featureType: "road.local",
stylers: [
{
visibility: "off"
}
]
},
{
featureType: "road.local",
elementType: "labels",
stylers: [
{
visibility: "off"
}
]
},
{
featureType: "road.local",
elementType: "labels.text.fill",
stylers: [
{
color: "#9e9e9e"
}
]
},
{
featureType: "transit.line",
elementType: "geometry",
stylers: [
{
color: "#e5e5e5"
}
]
},
{
featureType: "transit.line",
elementType: "geometry.fill",
stylers: [
{
visibility: "off"
}
]
},
{
featureType: "transit.station",
elementType: "geometry",
stylers: [
{
color: "#eeeeee"
}
]
},
{
featureType: "transit.station",
elementType: "geometry.fill",
stylers: [
{
visibility: "off"
}
]
},
{
featureType: "water",
elementType: "geometry",
stylers: [
{
color: "#c9c9c9"
}
]
},
{
featureType: "water",
elementType: "geometry.fill",
stylers: [
{
color: "#e0e3e8"
}
]
},
{
featureType: "water",
elementType: "labels.text.fill",
stylers: [
{
color: "#9e9e9e"
}
]
}
];
var darkStyle = [
{
elementType: "geometry",
stylers: [
{
color: "#242f3e"
}
]
},
{
elementType: "labels.text.fill",
stylers: [
{
color: "#746855"
}
]
},
{
elementType: "labels.text.stroke",
stylers: [
{
color: "#242f3e"
}
]
},
{
featureType: "administrative.land_parcel",
elementType: "labels",
stylers: [
{
visibility: "off"
}
]
},
{
featureType: "administrative.land_parcel",
elementType: "labels.text.fill",
stylers: [
{
color: "#bdbdbd"
}
]
},
{
featureType: "administrative.locality",
elementType: "labels.text.fill",
stylers: [
{
color: "#d59563"
}
]
},
{
featureType: "poi",
elementType: "geometry",
stylers: [
{
color: "#eeeeee"
}
]
},
{
featureType: "poi",
elementType: "labels.text",
stylers: [
{
visibility: "off"
}
]
},
{
featureType: "poi",
elementType: "labels.text.fill",
stylers: [
{
color: "#d59563"
}
]
},
{
featureType: "poi.park",
elementType: "geometry",
stylers: [
{
color: "#263c3f"
}
]
},
{
featureType: "poi.park",
elementType: "geometry.fill",
stylers: [
{
visibility: "off"
}
]
},
{
featureType: "poi.park",
elementType: "labels.text.fill",
stylers: [
{
color: "#6b9a76"
}
]
},
{
featureType: "road",
elementType: "geometry",
stylers: [
{
color: "#38414e"
}
]
},
{
featureType: "road",
elementType: "geometry.stroke",
stylers: [
{
color: "#212a37"
}
]
},
{
featureType: "road",
elementType: "labels.text.fill",
stylers: [
{
color: "#9ca5b3"
}
]
},
{
featureType: "road.arterial",
elementType: "labels",
stylers: [
{
visibility: "off"
}
]
},
{
featureType: "road.arterial",
elementType: "labels.text.fill",
stylers: [
{
color: "#757575"
}
]
},
{
featureType: "road.highway",
elementType: "geometry",
stylers: [
{
color: "#746855"
}
]
},
{
featureType: "road.highway",
elementType: "geometry.stroke",
stylers: [
{
color: "#1f2835"
}
]
},
{
featureType: "road.highway",
elementType: "labels",
stylers: [
{
visibility: "off"
}
]
},
{
featureType: "road.highway",
elementType: "labels.text.fill",
stylers: [
{
color: "#f3d19c"
}
]
},
{
featureType: "road.local",
stylers: [
{
visibility: "off"
}
]
},
{
featureType: "road.local",
elementType: "labels",
stylers: [
{
visibility: "off"
}
]
},
{
featureType: "transit",
elementType: "geometry",
stylers: [
{
color: "#2f3948"
}
]
},
{
featureType: "transit.line",
elementType: "geometry",
stylers: [
{
color: "#e5e5e5"
}
]
},
{
featureType: "transit.line",
elementType: "geometry.fill",
stylers: [
{
visibility: "off"
}
]
},
{
featureType: "transit.station",
elementType: "geometry",
stylers: [
{
color: "#eeeeee"
}
]
},
{
featureType: "transit.station",
elementType: "geometry.fill",
stylers: [
{
visibility: "off"
}
]
},
{
featureType: "transit.station",
elementType: "labels.text.fill",
stylers: [
{
color: "#d59563"
}
]
},
{
featureType: "water",
elementType: "geometry",
stylers: [
{
color: "#17263c"
}
]
},
{
featureType: "water",
elementType: "geometry.fill",
stylers: [
{
color: "#171f29"
}
]
},
{
featureType: "water",
elementType: "labels.text.fill",
stylers: [
{
color: "#515c6d"
}
]
},
{
featureType: "water",
elementType: "labels.text.stroke",
stylers: [
{
color: "#17263c"
}
]
}
];
let { google, map } = await this.initializeMap({
apiKey: this.apiKey,
mapConfig(google) {
return {
zoom: 10,
styles: self.darkMode ? darkStyle : lightStyle,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
},
streetViewControl: false,
center: self.center
};
}
});

let infoWindow = new google.maps.InfoWindow({
minWidth: 400,
maxWidth: 400
});

let location = require("@/assets/json/location.json");
new MarkerClusterer(
map,
location.map(function(markerElem) {
let point = new google.maps.LatLng(
parseFloat(markerElem.latitude),
parseFloat(markerElem.longitude)
);
let infowincontent = `
<div class="font-medium">
${markerElem.name}
</div>
<div class="mt-1 text-gray-600">
Latitude: ${markerElem.latitude}, Longitude: ${markerElem.longitude}
</div>`;
let marker = new google.maps.Marker({
map: map,
position: point,
icon: {
url: require("@/assets/images/map-marker.png")
}
});

google.maps.event.addListener(marker, "click", function() {
infoWindow.setContent(infowincontent);
google.maps.event.addListener(infoWindow, "domready", function() {
cash(".arrow_box")
.closest(".gm-style-iw-d")
.removeAttr("style");
cash(".arrow_box")
.closest(".gm-style-iw-d")
.attr("style", "overflow:visible");
cash(".arrow_box")
.closest(".gm-style-iw-d")
.parent()
.removeAttr("style");
});

infoWindow.open(map, marker);
});
return marker;
}),
{
styles: [
{
width: 51,
height: 50,
textColor: "white",
url: require("@/assets/images/map-marker-region.png"),
anchor: [0, 0]
}
]
}
);
}
}
};
</script>

+ 0
- 23
src/global-components/GoogleMapLoader.vue View File

@@ -1,23 +0,0 @@
<template>
<div ref="googleMap"></div>
</template>

<script>
import GoogleMapsApiLoader from "google-maps-api-loader";

export default {
methods: {
async initializeMap(config) {
const google = await GoogleMapsApiLoader({
apiKey: config.apiKey
});
const mapContainer = this.$refs.googleMap;
const map = new google.maps.Map(mapContainer, config.mapConfig(google));
return {
map: map,
google: google
};
}
}
};
</script>

+ 0
- 12
src/global-components/index.js View File

@@ -1,22 +1,10 @@
import Vue from "vue"; import Vue from "vue";
import "./Highlight";
import "./LineChart";
import "./DonutChart";
import "./BarChart";
import "./PieChart";
import "./GoogleMapLoader";
import "./LitePicker";
import "./Tippy";
import "./TippyContent";
import "./TailSelect";
import "./LoadingIcon";


Vue.component("Highlight", () => import("./Highlight")); Vue.component("Highlight", () => import("./Highlight"));
Vue.component("LineChart", () => import("./LineChart")); Vue.component("LineChart", () => import("./LineChart"));
Vue.component("DonutChart", () => import("./DonutChart")); Vue.component("DonutChart", () => import("./DonutChart"));
Vue.component("BarChart", () => import("./BarChart")); Vue.component("BarChart", () => import("./BarChart"));
Vue.component("PieChart", () => import("./PieChart")); Vue.component("PieChart", () => import("./PieChart"));
Vue.component("GoogleMapLoader", () => import("./GoogleMapLoader"));
Vue.component("LitePicker", () => import("./LitePicker")); Vue.component("LitePicker", () => import("./LitePicker"));
Vue.component("Tippy", () => import("./Tippy")); Vue.component("Tippy", () => import("./Tippy"));
Vue.component("TippyContent", () => import("./TippyContent")); Vue.component("TippyContent", () => import("./TippyContent"));


+ 0
- 20
src/views/Dashboard.vue View File

@@ -188,7 +188,6 @@
</div> </div>
</div> </div>
<div class="report-chart"> <div class="report-chart">
<ReportLineChart :height="273" class="mt-6" />
</div> </div>
</div> </div>
</div> </div>
@@ -202,7 +201,6 @@
> >
</div> </div>
<div class="intro-y box p-5 mt-5"> <div class="intro-y box p-5 mt-5">
<ReportPieChart :height="210" class="mt-3" />
<div class="mt-8"> <div class="mt-8">
<div class="flex items-center"> <div class="flex items-center">
<div class="w-2 h-2 bg-theme-11 rounded-full mr-3"></div> <div class="w-2 h-2 bg-theme-11 rounded-full mr-3"></div>
@@ -241,7 +239,6 @@
> >
</div> </div>
<div class="intro-y box p-5 mt-5"> <div class="intro-y box p-5 mt-5">
<ReportDonutChart :height="210" class="mt-3" />
<div class="mt-8"> <div class="mt-8">
<div class="flex items-center"> <div class="flex items-center">
<div class="w-2 h-2 bg-theme-11 rounded-full mr-3"></div> <div class="w-2 h-2 bg-theme-11 rounded-full mr-3"></div>
@@ -293,7 +290,6 @@
250 Official stores in 21 countries, click the marker to see 250 Official stores in 21 countries, click the marker to see
location details. location details.
</div> </div>
<ReportMap class="report-maps mt-5 bg-gray-200 rounded-md" />
</div> </div>
</div> </div>
<!-- END: Official Store --> <!-- END: Official Store -->
@@ -348,7 +344,6 @@
<div class="text-gray-600 mt-1">300 Sales</div> <div class="text-gray-600 mt-1">300 Sales</div>
</div> </div>
<div class="flex-none ml-auto relative"> <div class="flex-none ml-auto relative">
<ReportDonutChart1 :width="90" :height="90" />
<div <div
class="font-medium absolute w-full h-full flex items-center justify-center top-0 left-0" class="font-medium absolute w-full h-full flex items-center justify-center top-0 left-0"
> >
@@ -369,7 +364,6 @@
</div> </div>
</div> </div>
<div class="mt-4"> <div class="mt-4">
<SimpleLineChart1 :height="60" class="-ml-1" />
</div> </div>
</div> </div>
</div> </div>
@@ -381,7 +375,6 @@
<div class="text-gray-600 mt-1">1450 Products</div> <div class="text-gray-600 mt-1">1450 Products</div>
</div> </div>
<div class="flex-none ml-auto relative"> <div class="flex-none ml-auto relative">
<ReportDonutChart1 :width="90" :height="90" />
<div <div
class="font-medium absolute w-full h-full flex items-center justify-center top-0 left-0" class="font-medium absolute w-full h-full flex items-center justify-center top-0 left-0"
> >
@@ -402,7 +395,6 @@
</div> </div>
</div> </div>
<div class="mt-4"> <div class="mt-4">
<SimpleLineChart1 :height="60" class="-ml-1" />
</div> </div>
</div> </div>
</div> </div>
@@ -998,22 +990,10 @@
</template> </template>


<script> <script>
import ReportLineChart from "@/components/ReportLineChart";
import ReportDonutChart from "@/components/ReportDonutChart";
import ReportPieChart from "@/components/ReportPieChart";
import ReportMap from "@/components/ReportMap";
import ReportDonutChart1 from "@/components/ReportDonutChart1";
import SimpleLineChart1 from "@/components/SimpleLineChart1";
import VueSlickCarousel from "vue-slick-carousel"; import VueSlickCarousel from "vue-slick-carousel";


export default { export default {
components: { components: {
ReportLineChart,
ReportDonutChart,
ReportPieChart,
ReportMap,
ReportDonutChart1,
SimpleLineChart1,
VueSlickCarousel VueSlickCarousel
}, },
data() { data() {


+ 0
- 12
yarn.lock View File

@@ -1169,11 +1169,6 @@
postcss "7.0.32" postcss "7.0.32"
purgecss "^2.3.0" purgecss "^2.3.0"


"@google/markerclusterer@^2.0.8":
version "2.0.9"
resolved "https://registry.yarnpkg.com/@google/markerclusterer/-/markerclusterer-2.0.9.tgz#04e50e1bd0ea90e7c21ae487e5890180ce9a5f83"
integrity sha512-MMOvRRZTe8MtfLmr+3GmpnvbQPvdta7DhLgeapm3NpdBGe7sr8Gt3TvR/2ckBHttzjKz/dGd4v+GPmM34cC0Sg==

"@hapi/address@2.x.x": "@hapi/address@2.x.x":
version "2.1.4" version "2.1.4"
resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5" resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -4952,13 +4947,6 @@ globule@^1.0.0:
lodash "~4.17.10" lodash "~4.17.10"
minimatch "~3.0.2" minimatch "~3.0.2"


google-maps-api-loader@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/google-maps-api-loader/-/google-maps-api-loader-1.1.1.tgz#b600602451300521ba1b5d7493e7071d7931ac00"
integrity sha512-+bxumYl6WCxKDjygLFF2FxrNyKIB0QgWKFb+EZ6F5wt/MoU2cm/8se9uQ0o1nY7389F2qe6ocdpSFn1bKQAD5w==
dependencies:
es6-promise "^4.0.5"

graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2: graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2:
version "4.2.4" version "4.2.4"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"


Write Preview
Loading…
Cancel
Save