|
|
@@ -6,7 +6,7 @@
|
|
|
<div class="left-top">
|
|
|
<dv-border-box-13>
|
|
|
<Border-Item title="设备总览">
|
|
|
- <aaa />
|
|
|
+ <aaa v-if="equDataFlag" :data="equTotalData" />
|
|
|
<!-- <Left-Chart-1 /> -->
|
|
|
<!-- <Left-Chart-1 />
|
|
|
<Left-Chart-1 />
|
|
|
@@ -21,7 +21,9 @@
|
|
|
</div>
|
|
|
<div class="left-under">
|
|
|
<dv-border-box-13>
|
|
|
- <Border-Item title="用户年龄总览"><Left-chart-under /></Border-Item>
|
|
|
+ <Border-Item title="用户年龄总览"
|
|
|
+ ><Left-chart-under v-if="userAgeFlag" :dataList="userAgeList"
|
|
|
+ /></Border-Item>
|
|
|
</dv-border-box-13>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -30,24 +32,41 @@
|
|
|
<equ-map v-loading="mapLoading" @callback="initMap" />
|
|
|
<div class="left-under">
|
|
|
<dv-border-box-13>
|
|
|
- <Border-Item title="报警列表"><Right-Bottom /></Border-Item>
|
|
|
+ <Border-Item title="报警列表"
|
|
|
+ ><Right-Bottom v-if="alarmListFlag" :data="alarmList"
|
|
|
+ /></Border-Item>
|
|
|
</dv-border-box-13>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<div class="left-top">
|
|
|
<dv-border-box-13>
|
|
|
- <Border-Item title="设备总览"> <bbb /></Border-Item>
|
|
|
+ <Border-Item title="设备总览">
|
|
|
+ <bbb
|
|
|
+ v-if="userTotalFlag && userDataFlag"
|
|
|
+ :number="userTotalData"
|
|
|
+ :data="userData"
|
|
|
+ /></Border-Item>
|
|
|
</dv-border-box-13>
|
|
|
</div>
|
|
|
<div class="left-content">
|
|
|
<dv-border-box-13>
|
|
|
- <Border-Item title="月新增设备"><Left-Chart-2 /></Border-Item>
|
|
|
+ <Border-Item title="月新增设备"
|
|
|
+ ><Left-Chart-2
|
|
|
+ v-if="xylistFlag"
|
|
|
+ :xlist="xDataList"
|
|
|
+ :ylist="yDataList"
|
|
|
+ /></Border-Item>
|
|
|
</dv-border-box-13>
|
|
|
</div>
|
|
|
<div class="left-under">
|
|
|
<dv-border-box-13>
|
|
|
- <Border-Item title="月新增用户"> <Middle-Chart /></Border-Item>
|
|
|
+ <Border-Item title="月新增用户">
|
|
|
+ <Middle-Chart
|
|
|
+ v-if="xyUserFlag"
|
|
|
+ :xlist="xDataList"
|
|
|
+ :ylist="yDataList"
|
|
|
+ /></Border-Item>
|
|
|
</dv-border-box-13>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -101,6 +120,8 @@ import bbb from "./bbb";
|
|
|
import RightBottom from "./RightBottom";
|
|
|
import MiddleChart from "./MiddleChart";
|
|
|
|
|
|
+import { deviceView,userAgeAll,count,deviceOver,alarmStatusList,addDevice,addUser } from "@/api/system/equdata";
|
|
|
+
|
|
|
export default {
|
|
|
name: "DataView",
|
|
|
components: {
|
|
|
@@ -119,151 +140,642 @@ export default {
|
|
|
bbb,
|
|
|
RightBottom,
|
|
|
LeftChartUnder,
|
|
|
- MiddleChart
|
|
|
+ MiddleChart,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
mapLoading: false,
|
|
|
+ equTotalData: {},
|
|
|
+ equDataFlag: false,
|
|
|
+ userAgeFlag:false,
|
|
|
+ userTotalFlag:false,
|
|
|
+ userDataFlag:false,
|
|
|
+ alarmListFlag:false,
|
|
|
+ xylistFlag:false,
|
|
|
+ xyUserFlag:false,
|
|
|
+ userAgeList:[],
|
|
|
+ alarmList:[],
|
|
|
+ xDataList:[],
|
|
|
+ yDataList:[],
|
|
|
+ xUserList:[],
|
|
|
+ yUserList:[],
|
|
|
+ userTotalData:0,
|
|
|
};
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ this.deviceView();
|
|
|
+ this.userAgeAll();
|
|
|
+ this.userTotal()
|
|
|
+ this.getUserData()
|
|
|
+ this.getAlarmStatusList()
|
|
|
+ this.getEquData();
|
|
|
+ this.getAddUser()
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ getAddUser(){
|
|
|
+ addUser().then(res=>{
|
|
|
+ let xlist=res.data.map(item=>item.month)
|
|
|
+ let ylist=res.data.map(item=>item.count)
|
|
|
+ this.xUserList=xlist
|
|
|
+ this.yUserList=ylist
|
|
|
+ this.xyUserFlag=true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getEquData() {
|
|
|
+ addDevice().then(res=>{
|
|
|
+ let xlist=res.data.map(item=>item.month)
|
|
|
+ let ylist=res.data.map(item=>item.count)
|
|
|
+ this.xDataList=xlist
|
|
|
+ this.yDataList=ylist
|
|
|
+ this.xylistFlag=true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ deviceView() {
|
|
|
+ deviceView().then((res) => {
|
|
|
+ this.equTotalData = res.data;
|
|
|
+ this.equDataFlag = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ userTotal(){
|
|
|
+ count().then((res) => {
|
|
|
+ this.userTotalData=res.data
|
|
|
+ this.userTotalFlag=true
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getUserData(){
|
|
|
+ deviceOver().then(res=>{
|
|
|
+ this.userData=res.data
|
|
|
+ this.userDataFlag=true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ userAgeAll(){
|
|
|
+ userAgeAll().then(res=>{
|
|
|
+ this.userAgeList=res.data.list
|
|
|
+ this.userAgeFlag=true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getAlarmStatusList(){
|
|
|
+ alarmStatusList().then(res=>{
|
|
|
+ this.alarmList=res.data
|
|
|
+ this.alarmListFlag=true
|
|
|
+ })
|
|
|
+ },
|
|
|
initMap(AMap) {
|
|
|
this.AMap = AMap;
|
|
|
this.map = new AMap.Map("map", {
|
|
|
- // 设置地图容器id
|
|
|
+ resizeEnable: true,
|
|
|
// viewMode: "3D", // 是否为3D地图模式
|
|
|
- zoom: 5, // 初始化地图级别
|
|
|
- center: [105.602725, 37.076636], // 初始化地图中心点位置
|
|
|
- mapStyle: "amap://styles/darkblue"
|
|
|
- });
|
|
|
- this.clickMarker = new this.AMap.Marker();
|
|
|
- this.addMapMarkers(this.AMap, {
|
|
|
- equList: [
|
|
|
- { lng: 105.602725, lat: 37.076636 },
|
|
|
- { lng: 105.622725, lat: 37.75219686835205 },
|
|
|
- // { lng: 154.8098755478859, lat: 18.75219686835205 },
|
|
|
- // { lng: 183.8098755478859, lat: 34.75219686835205 },
|
|
|
- // { lng: 178.8098755478859, lat: 3.75219686835205 },
|
|
|
- ],
|
|
|
- });
|
|
|
- // this.getEquMap();
|
|
|
- // 暂时放这里
|
|
|
- this.map.on("click", (e) => {
|
|
|
- console.log(e, "e");
|
|
|
- this.regeoCode(e.lnglat);
|
|
|
+ zoom: 3.85, // 初始化地图级别
|
|
|
+ center: [101.835078, 42.90488], // 初始化地图中心点位置
|
|
|
});
|
|
|
+ // this.mapLoading = false;
|
|
|
+ // this.secherPlace(AMap);
|
|
|
+ // this.districtSearch(AMap);
|
|
|
+ // this.ruler(AMap);
|
|
|
+ this.mapZoomChange();
|
|
|
+ this.aaa();
|
|
|
},
|
|
|
- // 地图覆盖物
|
|
|
- addMapMarkers(AMap, data) {
|
|
|
- // console.log(data,'data');
|
|
|
- // // 项目中心点
|
|
|
- // const centerMarker = new AMap.Marker({
|
|
|
- // position: new AMap.LngLat(data.projectLng, data.projectLat),
|
|
|
- // offset: new AMap.Pixel(-20, -20),
|
|
|
- // icon: require(`@/assets/map-icon/center.png`),
|
|
|
- // });
|
|
|
- // 设备分布点
|
|
|
- this.markers = [];
|
|
|
- data.equList.forEach((item) => {
|
|
|
- const marker = new AMap.Marker({
|
|
|
- position: new AMap.LngLat(item.lng, item.lat),
|
|
|
- offset: new AMap.Pixel(-13, -30),
|
|
|
- // icon: require(`@/assets/map-icon/${item.classifyCode}-${
|
|
|
- // item.online === 0 ? "GRAY" : item.flag ? "DEFAULT" : "DANGER"
|
|
|
- // }.png`),
|
|
|
- icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
|
|
|
- anchor: "bottom-center",
|
|
|
- extData: {
|
|
|
- id: item.id,
|
|
|
- equNo: item.equNo,
|
|
|
- netCode: data.netCode,
|
|
|
- classifyCode: item.classifyCode,
|
|
|
- flag: item.flag,
|
|
|
- online: item.online,
|
|
|
- },
|
|
|
- });
|
|
|
- this.markers.push(marker);
|
|
|
- this.map.add(marker);
|
|
|
+ // 索引点聚合
|
|
|
+ // drawCluster(isCheck, isCheck2) {
|
|
|
+ // // console.log(this.$refs.tree.getCheckedKeys(true));
|
|
|
+ // if (this.cluster) {
|
|
|
+ // this.cluster.setMap(null);
|
|
|
+ // }
|
|
|
+ // let points = [
|
|
|
+ // {
|
|
|
+ // code: 862607059021807,
|
|
|
+ // equNo: "SHX-JG05276GS1932",
|
|
|
+ // onlineState: 0,
|
|
|
+ // storeName: "第1营业店（上海嘉定）",
|
|
|
+ // storeErpCode: "03-01-01",
|
|
|
+ // deptName: "通用设备二部",
|
|
|
+ // lnglat: ["121.81513906780002", "30.89272014115498"],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // code: 866041042138963,
|
|
|
+ // equNo: "SHX-SG01142860SJ",
|
|
|
+ // onlineState: 0,
|
|
|
+ // storeName: "上海维修组",
|
|
|
+ // storeErpCode: "08-01-01",
|
|
|
+ // deptName: "资产中心",
|
|
|
+ // lnglat: ["120.61801385657444", "31.977446558941004"],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // code: 867383057214142,
|
|
|
+ // equNo: "SHX-SG08898S-65XC",
|
|
|
+ // onlineState: 0,
|
|
|
+ // storeName: "第1营业店（上海嘉定）",
|
|
|
+ // storeErpCode: "03-01-01",
|
|
|
+ // deptName: "通用设备二部",
|
|
|
+ // lnglat: ["121.03558147655212", "31.126224206828198"],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // code: 864513041445245,
|
|
|
+ // equNo: "SHX-JG37778JCPT1412DC",
|
|
|
+ // onlineState: 0,
|
|
|
+ // storeName: "第5营业店（上海闵行）",
|
|
|
+ // storeErpCode: "03-03-08",
|
|
|
+ // deptName: "通用设备二部",
|
|
|
+ // lnglat: ["121.82208391421668", "30.85699004008208"],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // code: 867032059016076,
|
|
|
+ // equNo: "SHX-SG07695BT28ERT",
|
|
|
+ // onlineState: 0,
|
|
|
+ // storeName: "第3营业店（上海浦东）",
|
|
|
+ // storeErpCode: "03-01-40",
|
|
|
+ // deptName: "通用设备二部",
|
|
|
+ // lnglat: ["121.5704633089994", "29.894328624226418"],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // code: 868142047179180,
|
|
|
+ // equNo: "SHX-JG46091S0812E",
|
|
|
+ // onlineState: 0,
|
|
|
+ // storeName: "第1营业店（上海嘉定）",
|
|
|
+ // storeErpCode: "03-01-01",
|
|
|
+ // deptName: "通用设备二部",
|
|
|
+ // lnglat: ["121.31930274336634", "31.245171826552806"],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // code: 867383057182588,
|
|
|
+ // equNo: "SHX-JG55617S0607",
|
|
|
+ // onlineState: 0,
|
|
|
+ // storeName: "第1营业店（上海嘉定）",
|
|
|
+ // storeErpCode: "03-01-01",
|
|
|
+ // deptName: "通用设备二部",
|
|
|
+ // lnglat: ["121.02616661110348", "31.22516500695246"],
|
|
|
+ // },
|
|
|
+ // ];;
|
|
|
+ // // this.mapLoading = true;
|
|
|
+ // // 写接口
|
|
|
+ // // const equInfo2 = await this.getMapInfo(checkNodeKey, 0);
|
|
|
+ // // const equInfo1 = await this.getMapInfo(checkNodeKey, 1);
|
|
|
+ // // const { terminalList, data } = equInfo1.data;
|
|
|
+ // this.map.setZoomAndCenter(3.85, [101.835078, 42.90488]);
|
|
|
+ // const getNodes = (context) => {
|
|
|
+ // console.log('context',context);
|
|
|
+ // const clusterData = context.clusterData; // 聚合中包含数据
|
|
|
+ // console.log('clusterData',clusterData);
|
|
|
+ // const index = context.index; // 聚合的条件
|
|
|
+ // console.log("index:", index);
|
|
|
+ // const indexs = ["deptName", "storeErpCode", "equNo"];
|
|
|
+ // const i = indexs.indexOf(index.mainKey);
|
|
|
+ // let text =
|
|
|
+ // i === 0 ? clusterData[0][index.mainKey] : clusterData[0].storeName;
|
|
|
+ // if (i <= 1) {
|
|
|
+ // const extra = '<p class="showCount">' + context.count + "</p>";
|
|
|
+ // text = '<p class="showName">' + text + "</p>";
|
|
|
+ // text += extra;
|
|
|
+ // }
|
|
|
+ // const style = {
|
|
|
+ // index: i,
|
|
|
+ // text,
|
|
|
+ // };
|
|
|
+ // return style;
|
|
|
+ // };
|
|
|
+
|
|
|
+ // const getPosition = (context) => {
|
|
|
+ // console.log(context);
|
|
|
+ // const key = context.index.mainKey;
|
|
|
+ // const dataItem = context.clusterData && context.clusterData[0];
|
|
|
+ // const clusterName = dataItem[key];
|
|
|
+ // if (!clusterObj[clusterName]) {
|
|
|
+ // return null;
|
|
|
+ // }
|
|
|
+ // const point = clusterObj[clusterName].point;
|
|
|
+ // const centerLnglat = new this.AMap.LngLat(point[0], point[1]);
|
|
|
+ // return centerLnglat;
|
|
|
+ // };
|
|
|
+ // // 自定义聚合点样式
|
|
|
+ // const renderClusterMarker = (context) => {
|
|
|
+ // const marker = context.marker; // 聚合点标记对象
|
|
|
+ // const nodesObj = getNodes(context);
|
|
|
+ // // 自定义点标记样式
|
|
|
+ // const div = document.createElement("div");
|
|
|
+ // if (nodesObj.index === 0) {
|
|
|
+ // div.className = "amap-cluster amap-cluster-dep";
|
|
|
+ // }
|
|
|
+ // if (nodesObj.index === 1) {
|
|
|
+ // div.className = "amap-cluster amap-cluster-shop";
|
|
|
+ // }
|
|
|
+ // if (nodesObj.index <= 1) {
|
|
|
+ // // 聚合点自定义点击事件
|
|
|
+ // marker.on("click", (e) => {
|
|
|
+ // // console.log(e);
|
|
|
+ // /* let curZoom = this.map.getZoom();
|
|
|
+ // if (curZoom < 12) {
|
|
|
+ // curZoom += 1;
|
|
|
+ // } */
|
|
|
+ // let curZoom = this.map.getZoom();
|
|
|
+ // if (nodesObj.index === 0) {
|
|
|
+ // curZoom = 4.9;
|
|
|
+ // } else {
|
|
|
+ // curZoom += 1;
|
|
|
+ // }
|
|
|
+ // this.map.setZoomAndCenter(curZoom, e.lnglat);
|
|
|
+ // });
|
|
|
+
|
|
|
+ // div.innerHTML = nodesObj.text;
|
|
|
+ // marker.setContent(div);
|
|
|
+ // } else {
|
|
|
+ // // 非聚合点
|
|
|
+ // const dataItem = context.clusterData[0];
|
|
|
+ // marker.setIcon(require(`./img/online-${dataItem.onlineState}.png`));
|
|
|
+ // }
|
|
|
+
|
|
|
+ // // 自定义聚合点标记显示位置
|
|
|
+ // const position = getPosition(context);
|
|
|
+ // if (position) {
|
|
|
+ // marker.setPosition(position);
|
|
|
+ // }
|
|
|
+ // marker.setAnchor("center");
|
|
|
+ // };
|
|
|
+ // const clusterIndexSet = {
|
|
|
+ // equNo: {
|
|
|
+ // minZoom: 9,
|
|
|
+ // maxZoom: 22,
|
|
|
+ // },
|
|
|
+ // };
|
|
|
+ // /* eslint-disable no-new */
|
|
|
+ // this.cluster = new this.AMap.IndexCluster(this.map, points, {
|
|
|
+ // renderClusterMarker,
|
|
|
+ // clusterIndexSet,
|
|
|
+ // });
|
|
|
+ // this.mapLoading = false;
|
|
|
+ // },
|
|
|
+ // 监听地图缩放
|
|
|
+ mapZoomChange() {
|
|
|
+ this.map.on("zoomchange", () => {
|
|
|
+ const curZoom = this.map.getZoom();
|
|
|
+ console.log(curZoom);
|
|
|
+ if (curZoom < 12) {
|
|
|
+ this.map.clearInfoWindow();
|
|
|
+ }
|
|
|
});
|
|
|
- // console.log('this.markers',this.markers);
|
|
|
- // const overlayGroups = new AMap.OverlayGroup(this.markers);
|
|
|
- // // 比例尺
|
|
|
- // // const scale = new AMap.Scale();
|
|
|
+ },
|
|
|
|
|
|
- // this.map.add(overlayGroups);
|
|
|
- // this.map.add(centerMarker);
|
|
|
- // this.map.addControl(scale);
|
|
|
+ aaa(data, isCheck, isCheck2) {
|
|
|
+ if (this.cluster) {
|
|
|
+ this.cluster.setMap(null);
|
|
|
+ }
|
|
|
+ let points = [];
|
|
|
+ let clusterObj = {};
|
|
|
|
|
|
- // // 鼠标点击marker弹出自定义的信息窗体
|
|
|
- // overlayGroups.eachOverlay((overlay, index, collections) => {
|
|
|
- // const extData = overlay.getExtData();
|
|
|
- // overlay.on("click", () => {
|
|
|
- // const params = {
|
|
|
- // netCode: extData.netCode,
|
|
|
- // equNo: extData.equNo,
|
|
|
- // };
|
|
|
- // getEquInfo(params).then((res) => {
|
|
|
- // const info = res.data;
|
|
|
- // const id = extData.id;
|
|
|
- // const currentMarker = this.markers.find(
|
|
|
- // (item) => item._opts.extData.id === id
|
|
|
- // );
|
|
|
- // currentMarker.setIcon(
|
|
|
- // require(`@/assets/map-icon/${extData.classifyCode}-${
|
|
|
- // info.online === 0 ? "GRAY" : extData.flag ? "DEFAULT" : "DANGER"
|
|
|
- // }.png`)
|
|
|
- // );
|
|
|
- // const onlineEnum = {
|
|
|
- // 0: "离线",
|
|
|
- // 1: "在线",
|
|
|
- // };
|
|
|
- // info.projectName = data.projectName;
|
|
|
- // const infoWindow = new AMap.InfoWindow({
|
|
|
- // content: `<div class="equ-info-box">
|
|
|
- // <p class="equ-info-item"><span class="label">设备编号</span><span class="value" id="equNo">${
|
|
|
- // info.equNo
|
|
|
- // }</span></p>
|
|
|
- // <p class="equ-info-item"><span class="label">当前设备状态</span><span class="value tag">${
|
|
|
- // onlineEnum[info.online]
|
|
|
- // }</span></p>
|
|
|
- // <p class="equ-info-item"><span class="label">累计报警次数</span><span class="value link" onclick="goNextPage(this, 'alarmStat')" data-equNo="${
|
|
|
- // info.equNo
|
|
|
- // }" data-name="${info.projectName}">${
|
|
|
- // info.alarmTotal
|
|
|
- // }</span></p>
|
|
|
- // <p class="equ-info-item"><span class="label">最近定位时间</span><span class="value">${
|
|
|
- // info.positionTime
|
|
|
- // }</span></p>
|
|
|
- // <p class="equ-info-item"><span class="label">TBox品牌</span><span class="value">${
|
|
|
- // info.brand
|
|
|
- // }</span></p>
|
|
|
- // <p class="equ-info-item"><span class="label">TBox编号</span><span class="value">${
|
|
|
- // info.gpsId
|
|
|
- // }</span></p>
|
|
|
- // </div>`,
|
|
|
- // anchor: "top-center",
|
|
|
- // });
|
|
|
- // infoWindow.open(this.map, overlay.getPosition());
|
|
|
- // });
|
|
|
- // });
|
|
|
- // });
|
|
|
+ points = [
|
|
|
+ {
|
|
|
+ code: 862607059021807,
|
|
|
+ equNo: "SHX-JG05276GS1932",
|
|
|
+ onlineState: 0,
|
|
|
+ storeName: "第1营业店（上海嘉定）",
|
|
|
+ storeErpCode: "03-01-01",
|
|
|
+ deptName: "通用设备二部",
|
|
|
+ lnglat: ["121.81513906780002", "30.89272014115498"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ code: 866041042138963,
|
|
|
+ equNo: "SHX-SG01142860SJ",
|
|
|
+ onlineState: 0,
|
|
|
+ storeName: "上海维修组",
|
|
|
+ storeErpCode: "08-01-01",
|
|
|
+ deptName: "资产中心",
|
|
|
+ lnglat: ["120.61801385657444", "31.977446558941004"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ code: 867383057214142,
|
|
|
+ equNo: "SHX-SG08898S-65XC",
|
|
|
+ onlineState: 0,
|
|
|
+ storeName: "第1营业店（上海嘉定）",
|
|
|
+ storeErpCode: "03-01-01",
|
|
|
+ deptName: "通用设备二部",
|
|
|
+ lnglat: ["121.03558147655212", "31.126224206828198"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ code: 864513041445245,
|
|
|
+ equNo: "SHX-JG37778JCPT1412DC",
|
|
|
+ onlineState: 0,
|
|
|
+ storeName: "第5营业店（上海闵行）",
|
|
|
+ storeErpCode: "03-03-08",
|
|
|
+ deptName: "通用设备二部",
|
|
|
+ lnglat: ["121.82208391421668", "30.85699004008208"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ code: 867032059016076,
|
|
|
+ equNo: "SHX-SG07695BT28ERT",
|
|
|
+ onlineState: 0,
|
|
|
+ storeName: "第3营业店（上海浦东）",
|
|
|
+ storeErpCode: "03-01-40",
|
|
|
+ deptName: "通用设备二部",
|
|
|
+ lnglat: ["121.5704633089994", "29.894328624226418"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ code: 868142047179180,
|
|
|
+ equNo: "SHX-JG46091S0812E",
|
|
|
+ onlineState: 0,
|
|
|
+ storeName: "第1营业店（上海嘉定）",
|
|
|
+ storeErpCode: "03-01-01",
|
|
|
+ deptName: "通用设备二部",
|
|
|
+ lnglat: ["121.31930274336634", "31.245171826552806"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ code: 867383057182588,
|
|
|
+ equNo: "SHX-JG55617S0607",
|
|
|
+ onlineState: 0,
|
|
|
+ storeName: "第1营业店（上海嘉定）",
|
|
|
+ storeErpCode: "03-01-01",
|
|
|
+ deptName: "通用设备二部",
|
|
|
+ lnglat: ["121.02616661110348", "31.22516500695246"],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ clusterObj = {
|
|
|
+ "03-04-40": {
|
|
|
+ nodeId: 200408003032,
|
|
|
+ nodeName: "第12营业店（苏州昆山）",
|
|
|
+ nodeErpCode: "03-04-40",
|
|
|
+ point: ["121.01714", "31.35137"],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ console.log(clusterObj, "clusterObj");
|
|
|
+ this.map.setZoomAndCenter(3.85, [101.835078, 42.90488]);
|
|
|
+ const getNodes = (context) => {
|
|
|
+ console.log("context", context);
|
|
|
+ const clusterData = context.clusterData; // 聚合中包含数据
|
|
|
+ const index = context.index; // 聚合的条件
|
|
|
+ console.log("index:", index);
|
|
|
+ const indexs = ["deptName", "storeErpCode", "equNo"];
|
|
|
+ const i = indexs.indexOf(index.mainKey);
|
|
|
+ let text =
|
|
|
+ i === 0 ? clusterData[0][index.mainKey] : clusterData[0].storeName;
|
|
|
+ if (i <= 1) {
|
|
|
+ const extra = '<p class="showCount">' + context.count + "</p>";
|
|
|
+ text = '<p class="showName">' + text + "</p>";
|
|
|
+ text += extra;
|
|
|
+ }
|
|
|
+ const style = {
|
|
|
+ index: i,
|
|
|
+ text,
|
|
|
+ };
|
|
|
+ return style;
|
|
|
+ };
|
|
|
|
|
|
- // // 地图的3km圆
|
|
|
- // const circle = new AMap.Circle({
|
|
|
- // center: new AMap.LngLat(data.projectLng, data.projectLat), // 圆心位置
|
|
|
- // radius: data.radius * 1000, // 半径
|
|
|
- // strokeColor: "#367EF5", // 线颜色
|
|
|
- // strokeOpacity: 0.8, // 线透明度
|
|
|
- // strokeWeight: 1, // 线粗细度
|
|
|
- // fillColor: "#18FFFC", // 填充颜色
|
|
|
- // fillOpacity: 0.1, // 填充透明度
|
|
|
- // });
|
|
|
- // this.map.add(circle);
|
|
|
- // this.map.setFitView();
|
|
|
- /* this.map.on("click", (e) => {
|
|
|
- this.regeoCode(e.lnglat);
|
|
|
- }); */
|
|
|
+ const getPosition = (context) => {
|
|
|
+ console.log(context, "121212");
|
|
|
+ const key = context.index.mainKey;
|
|
|
+ const dataItem = context.clusterData && context.clusterData[0];
|
|
|
+ const clusterName = dataItem[key];
|
|
|
+ if (!clusterObj[clusterName]) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ const point = clusterObj[clusterName].point;
|
|
|
+ const centerLnglat = new this.AMap.LngLat(point[0], point[1]);
|
|
|
+ return centerLnglat;
|
|
|
+ };
|
|
|
+ // 自定义聚合点样式
|
|
|
+ const renderClusterMarker = (context) => {
|
|
|
+ const marker = context.marker; // 聚合点标记对象
|
|
|
+ console.log(marker, "45566");
|
|
|
+ const nodesObj = getNodes(context);
|
|
|
+ console.log(nodesObj, "nodesObj");
|
|
|
+ // 自定义点标记样式
|
|
|
+ const div = document.createElement("div");
|
|
|
+ if (nodesObj.index === 0) {
|
|
|
+ div.className = "amap-cluster amap-cluster-dep";
|
|
|
+ }
|
|
|
+ if (nodesObj.index === 1) {
|
|
|
+ div.className = "amap-cluster amap-cluster-shop";
|
|
|
+ }
|
|
|
+ if (nodesObj.index <= 1) {
|
|
|
+ // 聚合点自定义点击事件
|
|
|
+ marker.on("click", (e) => {
|
|
|
+ // console.log(e);
|
|
|
+ /* let curZoom = this.map.getZoom();
|
|
|
+ if (curZoom < 12) {
|
|
|
+ curZoom += 1;
|
|
|
+ } */
|
|
|
+ let curZoom = this.map.getZoom();
|
|
|
+ if (nodesObj.index === 0) {
|
|
|
+ curZoom = 4.9;
|
|
|
+ } else {
|
|
|
+ curZoom += 1;
|
|
|
+ }
|
|
|
+ this.map.setZoomAndCenter(curZoom, e.lnglat);
|
|
|
+ });
|
|
|
+ if (nodesObj.index === 1) {
|
|
|
+ marker.on("mouseover", () => {
|
|
|
+ this.marker = marker;
|
|
|
+ const key = context.index.mainKey;
|
|
|
+ const dataItem = context.clusterData && context.clusterData[0];
|
|
|
+ const clusterName = dataItem[key];
|
|
|
+ if (!clusterObj[clusterName]) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ const nodeId = clusterObj[clusterName].nodeId;
|
|
|
+ let showStatus = false;
|
|
|
+ if (this.shopInfoWindow) {
|
|
|
+ showStatus = this.shopInfoWindow.getIsOpen();
|
|
|
+ }
|
|
|
+ if (!showStatus) {
|
|
|
+ // 请求数据
|
|
|
+ getMapStoreInfo({ nodeId }).then((res) => {
|
|
|
+ if (res) {
|
|
|
+ const data = res.data;
|
|
|
+ this.openShopInfoWindow(data);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ div.innerHTML = nodesObj.text;
|
|
|
+ marker.setContent(div);
|
|
|
+ } else {
|
|
|
+ // 非聚合点
|
|
|
+ const dataItem = context.clusterData[0];
|
|
|
+ console.log(dataItem, "2323");
|
|
|
+ marker.setIcon(require(`./img/online-${dataItem.onlineState}.png`));
|
|
|
+
|
|
|
+ // 自定义点击事件
|
|
|
+ marker.on("click", (e) => {
|
|
|
+ this.marker = marker;
|
|
|
+ const dataItem = context.clusterData[0];
|
|
|
+ const code = context.clusterData[0].code;
|
|
|
+
|
|
|
+ // 数据请求
|
|
|
+ getEquInfo(code).then(async (res) => {
|
|
|
+ if (res) {
|
|
|
+ this.equData = res.data;
|
|
|
+ this.equAddress = "根据经纬度查询地址失败";
|
|
|
+ this.equAddress = await this.getAddress(dataItem.lnglat);
|
|
|
+ this.openEquInfoWindow(this.equData, this.equAddress);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 自定义聚合点标记显示位置
|
|
|
+ const position = getPosition(context);
|
|
|
+ if (position) {
|
|
|
+ marker.setPosition(position);
|
|
|
+ }
|
|
|
+ marker.setAnchor("center");
|
|
|
+ };
|
|
|
+ const clusterIndexSet = {
|
|
|
+ deptName: {
|
|
|
+ minZoom: 2,
|
|
|
+ maxZoom: 4.8,
|
|
|
+ },
|
|
|
+ storeErpCode: {
|
|
|
+ minZoom: 4.8,
|
|
|
+ maxZoom: 9,
|
|
|
+ },
|
|
|
+ equNo: {
|
|
|
+ minZoom: 9,
|
|
|
+ maxZoom: 22,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ /* eslint-disable no-new */
|
|
|
+ this.cluster = new this.AMap.IndexCluster(this.map, points, {
|
|
|
+ renderClusterMarker,
|
|
|
+ clusterIndexSet,
|
|
|
+ });
|
|
|
+ this.mapLoading = false;
|
|
|
+ console.log(this.cluster, 777777);
|
|
|
},
|
|
|
+ // initMap(AMap) {
|
|
|
+ // this.AMap = AMap;
|
|
|
+ // this.map = new AMap.Map("map", {
|
|
|
+ // // 设置地图容器id
|
|
|
+ // // viewMode: "3D", // 是否为3D地图模式
|
|
|
+ // zoom: 5, // 初始化地图级别
|
|
|
+ // center: [105.602725, 37.076636], // 初始化地图中心点位置
|
|
|
+ // mapStyle: "amap://styles/darkblue",
|
|
|
+ // });
|
|
|
+ // this.clickMarker = new this.AMap.Marker();
|
|
|
+ // this.addMapMarkers(this.AMap, {
|
|
|
+ // equList: [
|
|
|
+ // { lng: 105.602725, lat: 37.076636 },
|
|
|
+ // { lng: 105.622725, lat: 37.75219686835205 },
|
|
|
+ // // { lng: 154.8098755478859, lat: 18.75219686835205 },
|
|
|
+ // // { lng: 183.8098755478859, lat: 34.75219686835205 },
|
|
|
+ // // { lng: 178.8098755478859, lat: 3.75219686835205 },
|
|
|
+ // ],
|
|
|
+ // });
|
|
|
+ // // this.getEquMap();
|
|
|
+ // // 暂时放这里
|
|
|
+ // this.map.on("click", (e) => {
|
|
|
+ // console.log(e, "e");
|
|
|
+ // this.regeoCode(e.lnglat);
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ // // 地图覆盖物
|
|
|
+ // addMapMarkers(AMap, data) {
|
|
|
+ // // console.log(data,'data');
|
|
|
+ // // // 项目中心点
|
|
|
+ // // const centerMarker = new AMap.Marker({
|
|
|
+ // // position: new AMap.LngLat(data.projectLng, data.projectLat),
|
|
|
+ // // offset: new AMap.Pixel(-20, -20),
|
|
|
+ // // icon: require(`@/assets/map-icon/center.png`),
|
|
|
+ // // });
|
|
|
+ // // 设备分布点
|
|
|
+ // this.markers = [];
|
|
|
+ // data.equList.forEach((item) => {
|
|
|
+ // const marker = new AMap.Marker({
|
|
|
+ // position: new AMap.LngLat(item.lng, item.lat),
|
|
|
+ // offset: new AMap.Pixel(-13, -30),
|
|
|
+ // // icon: require(`@/assets/map-icon/${item.classifyCode}-${
|
|
|
+ // // item.online === 0 ? "GRAY" : item.flag ? "DEFAULT" : "DANGER"
|
|
|
+ // // }.png`),
|
|
|
+ // icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
|
|
|
+ // anchor: "bottom-center",
|
|
|
+ // extData: {
|
|
|
+ // id: item.id,
|
|
|
+ // equNo: item.equNo,
|
|
|
+ // netCode: data.netCode,
|
|
|
+ // classifyCode: item.classifyCode,
|
|
|
+ // flag: item.flag,
|
|
|
+ // online: item.online,
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+ // this.markers.push(marker);
|
|
|
+ // this.map.add(marker);
|
|
|
+ // });
|
|
|
+ // // console.log('this.markers',this.markers);
|
|
|
+ // // const overlayGroups = new AMap.OverlayGroup(this.markers);
|
|
|
+ // // // 比例尺
|
|
|
+ // // // const scale = new AMap.Scale();
|
|
|
+
|
|
|
+ // // this.map.add(overlayGroups);
|
|
|
+ // // this.map.add(centerMarker);
|
|
|
+ // // this.map.addControl(scale);
|
|
|
+
|
|
|
+ // // // 鼠标点击marker弹出自定义的信息窗体
|
|
|
+ // // overlayGroups.eachOverlay((overlay, index, collections) => {
|
|
|
+ // // const extData = overlay.getExtData();
|
|
|
+ // // overlay.on("click", () => {
|
|
|
+ // // const params = {
|
|
|
+ // // netCode: extData.netCode,
|
|
|
+ // // equNo: extData.equNo,
|
|
|
+ // // };
|
|
|
+ // // getEquInfo(params).then((res) => {
|
|
|
+ // // const info = res.data;
|
|
|
+ // // const id = extData.id;
|
|
|
+ // // const currentMarker = this.markers.find(
|
|
|
+ // // (item) => item._opts.extData.id === id
|
|
|
+ // // );
|
|
|
+ // // currentMarker.setIcon(
|
|
|
+ // // require(`@/assets/map-icon/${extData.classifyCode}-${
|
|
|
+ // // info.online === 0 ? "GRAY" : extData.flag ? "DEFAULT" : "DANGER"
|
|
|
+ // // }.png`)
|
|
|
+ // // );
|
|
|
+ // // const onlineEnum = {
|
|
|
+ // // 0: "离线",
|
|
|
+ // // 1: "在线",
|
|
|
+ // // };
|
|
|
+ // // info.projectName = data.projectName;
|
|
|
+ // // const infoWindow = new AMap.InfoWindow({
|
|
|
+ // // content: `<div class="equ-info-box">
|
|
|
+ // // <p class="equ-info-item"><span class="label">设备编号</span><span class="value" id="equNo">${
|
|
|
+ // // info.equNo
|
|
|
+ // // }</span></p>
|
|
|
+ // // <p class="equ-info-item"><span class="label">当前设备状态</span><span class="value tag">${
|
|
|
+ // // onlineEnum[info.online]
|
|
|
+ // // }</span></p>
|
|
|
+ // // <p class="equ-info-item"><span class="label">累计报警次数</span><span class="value link" onclick="goNextPage(this, 'alarmStat')" data-equNo="${
|
|
|
+ // // info.equNo
|
|
|
+ // // }" data-name="${info.projectName}">${
|
|
|
+ // // info.alarmTotal
|
|
|
+ // // }</span></p>
|
|
|
+ // // <p class="equ-info-item"><span class="label">最近定位时间</span><span class="value">${
|
|
|
+ // // info.positionTime
|
|
|
+ // // }</span></p>
|
|
|
+ // // <p class="equ-info-item"><span class="label">TBox品牌</span><span class="value">${
|
|
|
+ // // info.brand
|
|
|
+ // // }</span></p>
|
|
|
+ // // <p class="equ-info-item"><span class="label">TBox编号</span><span class="value">${
|
|
|
+ // // info.gpsId
|
|
|
+ // // }</span></p>
|
|
|
+ // // </div>`,
|
|
|
+ // // anchor: "top-center",
|
|
|
+ // // });
|
|
|
+ // // infoWindow.open(this.map, overlay.getPosition());
|
|
|
+ // // });
|
|
|
+ // // });
|
|
|
+ // // });
|
|
|
+
|
|
|
+ // // // 地图的3km圆
|
|
|
+ // // const circle = new AMap.Circle({
|
|
|
+ // // center: new AMap.LngLat(data.projectLng, data.projectLat), // 圆心位置
|
|
|
+ // // radius: data.radius * 1000, // 半径
|
|
|
+ // // strokeColor: "#367EF5", // 线颜色
|
|
|
+ // // strokeOpacity: 0.8, // 线透明度
|
|
|
+ // // strokeWeight: 1, // 线粗细度
|
|
|
+ // // fillColor: "#18FFFC", // 填充颜色
|
|
|
+ // // fillOpacity: 0.1, // 填充透明度
|
|
|
+ // // });
|
|
|
+ // // this.map.add(circle);
|
|
|
+ // // this.map.setFitView();
|
|
|
+ // /* this.map.on("click", (e) => {
|
|
|
+ // this.regeoCode(e.lnglat);
|
|
|
+ // }); */
|
|
|
+ // },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -272,7 +784,7 @@ export default {
|
|
|
#data-view-container {
|
|
|
width: 100%;
|
|
|
// height: 100%;
|
|
|
- min-height:calc(100vh - 84px);
|
|
|
+ min-height: calc(100vh - 84px);
|
|
|
background-color: #030409;
|
|
|
color: #fff;
|
|
|
overflow: hidden;
|
|
|
@@ -280,7 +792,6 @@ export default {
|
|
|
background-size: 100%;
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
-
|
|
|
.main {
|
|
|
display: flex;
|
|
|
padding: 0 10px 10px 10px;
|
|
|
@@ -342,8 +853,40 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+ ::v-deep.amap-cluster {
|
|
|
+ position: relative;
|
|
|
+ color: #fff;
|
|
|
+ box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 4px;
|
|
|
+ text-align: center;
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ display: block;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-color: transparent;
|
|
|
+ border-style: solid;
|
|
|
+ border-width: 6px;
|
|
|
+ border-bottom-width: 0;
|
|
|
+ left: 50%;
|
|
|
+ bottom: -6px;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ::v-deep.amap-cluster-dep {
|
|
|
+ width: 140px;
|
|
|
+ background: #d11128;
|
|
|
+ &::after {
|
|
|
+ border-top-color: #d11128;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ::v-deep.amap-cluster-shop {
|
|
|
+ width: 170px;
|
|
|
+ background: #f25668;
|
|
|
+ &::after {
|
|
|
+ border-top-color: #f25668;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
