admin_manage.git

parent: 7ef9e050 | 补丁 | 提交 | ignore whitespace

lishifeng

2020-08-25 e076f58966a47e5346e29d77faa5e0a7eebc421d

提交555

1个文件已添加

5个文件已修改

	public/index.html	3 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/MyElTree.vue	3 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/MyElTree999.vue	52 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/pages/home.vue	2 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/pages/index.vue	204 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	vue.config.js	2 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 public/index.html

@@ -5,8 +5,7 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=WYFBZ-2Z5LD-EKL4B-HN6ZN-JFOTV-MQFHJ"></script>
    <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=WYFBZ-2Z5LD-EKL4B-HN6ZN-JFOTV-MQFHJ"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=AWqwD701uOy6kaLIxBY2NDjATvE6x5IG"></script>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>

 src/components/MyElTree.vue

@@ -5,6 +5,7 @@
    node-key="id"
    ref="tree"  
    :data="data"
    :load="loadNode" lazy 
    @node-click="nodeClick">
    </el-tree>
</template>
@@ -42,7 +43,7 @@
}
</script>

<style scoped>
<style scoped lang="less">
.filter-tree {
    -webkit-user-select: none;
    -moz-user-select: none;

 src/components/MyElTree999.vue

New file
@@ -0,0 +1,52 @@
<template>
    <el-tree
    class="filter-tree"
    :props="defaultProps"
    node-key="id"
    ref="tree"  
    :data="data"
    @node-click="nodeClick">
    </el-tree>
</template>

<script>
export default {
    name: 'MyElTree',
    props:{
        data:{
            type: Array,
            default() {
                return [];
            }
        }
    },
    data(){
        return {
            current: '',
            defaultProps: {
                children: 'children',
                label: 'label',
            }
        }
    },
    methods: {
        nodeClick(data, node) {
            node.isCurrent = node.isLeaf;
            if(node.isLeaf && this.current != node.key) {
                this.current = node.key;
                this.$emit('node-click', data);
            }
            this.$refs.tree.setCurrentKey(this.current);
        },
    }
}
</script>

<style scoped lang="less">
.filter-tree {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
</style>

 src/pages/home.vue

@@ -99,7 +99,7 @@
}
</script>

<style scoped>
<style scoped lang="less">
.flex-layout {
    display: flex;
    height: 100%;

 src/pages/index.vue

@@ -1,10 +1,17 @@
<template>
  <flex-layout direction="row" class="page-index">
    <content-box title="站点列表" slot="header" toggle style="width:320px">
      <my-el-tree :data="cityData" @node-click="nodeClick"></my-el-tree>
      <!-- <my-el-tree @node-click="nodeClick" :data="data"></my-el-tree> -->
      <el-tree
        @node-click="nodeClick"
        :load="loadNode"
        lazy
        class="filter-tree"
        :props="defaultProps"
      ></el-tree>
    </content-box>
    <div class="map-container">
      <div ref="map" class="map-content"></div>
      <div class="map-content" id="allmap"></div>
    </div>
    <content-box title="站点列表" slot="footer" style="width:380px" no-header>
      <div class="pie-list">
@@ -26,29 +33,32 @@
</template>

<script>
import TMap from "TMap";
import BMapGL from "BMapGL";
import ContentBox from "../components/ContentBox";
import MyElTree from "../components/MyElTree";
/* import MyElTree from "../components/MyElTree"; */
import PieChart from "../components/chart/PieChart";

import {
  searchPowerOff,
  searchBattGood
  /* searchProvince,
  searchBattGood,
  searchProvince,
  searchCity,
  searchCounty, */
  searchCounty,
  searchStation,
  searchMapStation,
  searchBattInfo
} from "@/assets/js/api";

let map, chart1, chart2, chart3, chart4;
let chart1, chart2, chart3, chart4;
export default {
  components: {
    ContentBox,
    MyElTree,
    /*   MyElTree, */
    PieChart
  },
  data() {
    return {
      cityData: [
      /*   data: [
        {
          id: "湖北省",
          label: "湖北省",
@@ -94,24 +104,162 @@
            }
          ]
        }
      ]
      ] */

      defaultProps: {
        label: "label",
        isLeaf: (data, node) => {
          if (node.level === 4) {
            // 第三层没有子节点
            return true;
          }
        }
      }
    };
  },

  methods: {
    initMap() {
      map = new TMap.Map(this.$refs.map, {
        center: new TMap.LatLng(39.916527, 116.397128), //设置地图中心点坐标
        zoom: 17, //设置地图缩放级别
        viewMode: "3D",
        setPitch: 50
     
      // 按住鼠标右键，修改倾斜角和角度
      var map = new BMapGL.Map("allmap"); // 创建Map实例
      var point = new BMapGL.Point(116.404, 39.925);
      map.centerAndZoom(point, 15) // 初始化地图,设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      map.setHeading(64.5);
      map.setTilt(73);

      var marker = new BMapGL.Marker(point); // 创建点
      map.addOverlay(marker); // 将标注添加到地图中

      var opts = {
        width: 300, // 信息窗口宽度
        height: 200, // 信息窗口高度
        title: '<p style="font-size: 16px;color: #2ca90e;margin:2px;margin-bottom: 20px;">湖北省-鄂州市-东方世纪城-设备1 </p>', // 信息窗口标题
        message: "这里是故宫"
      };
      var infoWindow = new BMapGL.InfoWindow(
       '<p style="font-size: 16px;color: #2ca90e;margin:2px;margin-bottom: 20px;">蓄电池组告警数目：50 详情>> <br> 蓄电池组落后数目：0 详情>> <br> 蓄电池组延时数目：0 详情>> <br> 实时数据  历史数据 <br>地址：上海市-上海市-浦东新区-卢东路</p>',
      
        opts); // 创建信息窗口对象
      marker.addEventListener("click", function() {
        map.openInfoWindow(infoWindow, point); //开启信息窗口
      });
      console.log(map);
    },

    //动态加载城市列表
    /* loadNode 加载子树数据的方法*/
    async loadNode() {},
    async loadNode(node, resolve) {
      console.log("node", node);
      if (node.level === 0) {
        /* * 查询省 */
        const { data: province } = await searchProvince();
        // console.log("province", province);
        if (province.result && JSON.parse(province.result).code == 0) {
          return this.$message.error(JSON.parse(province.result).msg);
        }
        const list = JSON.parse(province.result).data;
        //console.log("list", list)
        const cityData = list.map(item => {
          return { label: item }; /* return出一个对象  最后得到一个数组对象 */
        });
        //  console.log("cityData", cityData)
        return resolve(cityData);
      } else if (node.level === 1) {
        /* 查询市 */
        const city = await searchCity({ StationName1: node.data.label });
        //console.log('city.data.result',city.data.result);

        if (city.data.result && JSON.parse(city.data.result).code == 0) {
          return this.$message.error(JSON.parse(city.data.result).msg);
        }

        const citys = JSON.parse(city.data.result).data;
        const cityList = citys.map(item => {
          return { label: item };
        });
        return resolve(cityList);
        /* console.log("cityList", cityList); */
      } else if (node.level === 2) {
        /* 查询区县 */

        const county = await searchCounty({
          StationName1: node.parent.data.label,
          StationName2: node.data.label
        });
       //console.log(' county', county);
     
       if (county.data.result && JSON.parse(county.data.result).code == 0) {
          return this.$message.error(JSON.parse(county.data.result).msg);
        }

        const countys = JSON.parse(county.data.result).data;
        const countyList = countys.map(item => {
          return { label: item };
        });

        return resolve(countyList);
      } else if (node.level === 3) {
        /* room 机房信息  */
        const room = await searchStation({
          StationName1: node.parent.parent.data.label,
          StationName2: node.parent.data.label,
          StationName5: node.data.label
        });
        //console.log(' room', room);
        if (room.data.result && JSON.parse(room.data.result).code == 0) {
          return this.$message.error(JSON.parse(room.data.result).msg);
        }
        const rooms = JSON.parse(room.data.result).data;
        /* StationName3机房位置信息 */
        const roomList = rooms.map(item => {
          return { label: item.StationName3 };
        });
        return resolve(roomList);
      } else {
        /* 查询电池组信息 */
        return resolve([]);
      }
    },

    async handleInterface(node) {
      const [areaRoom, batteryList] = await Promise.all([
        /* 查询地图机房信息 （结果中有机房的位置信息） */
        searchMapStation({
          StationName1: node.parent.parent.parent.data.label,
          StationName2: node.parent.parent.data.label,
          StationName5: node.parent.data.label
        }),
        /*  查询电池组信息 */
        searchBattInfo({
          StationName1: node.parent.parent.parent.data.label,
          StationName2: node.parent.parent.data.label,
          StationName5: node.parent.data.label,
          StationName3: node.data.label
        })
      ]);
      //console.log('areaRoom',areaRoom);
      
      if (areaRoom.data.result && JSON.parse(areaRoom.data.result).code == 0)  {
        return this.$message.error(JSON.parse(areaRoom.data.result).msg);
      }
      //console.log('batteryList',batteryList);
      if (batteryList.data.result && JSON.parse(batteryList.data.result).code == 0) {
        return this.$message.error(JSON.parse(batteryList.data.result).msg);
      }
      const list = JSON.parse(areaRoom.data.result).data;
      let obj = list.find(item => item.StationName3 == node.data.label);
      if (obj.longitude == 0 && obj.latitude == 0) {
        this.$message.warning("机房未定位");
      }
    },
    //树形控件点击事件
    async nodeClick(current, value) {
      console.log(value.level, value);
      if (value.level > 3) {
        this.handleInterface(value);
      }
    },

    initChart() {
      // 饼状图1
      chart1 = {
@@ -224,6 +372,9 @@
        searchBattGood(),
        searchPowerOff()
      ]);
       console.log('battGood',battGood);
        console.log('powerOff',powerOff);
        
      if (battGood.status !== 200) {
        return this.$message.error(battGood.statusText);
      }
@@ -232,14 +383,11 @@
      }
      this.battGood = JSON.parse(battGood.data.result);
      this.powerOff = JSON.parse(powerOff.data.result);
     

      this.initChart();
    },
    //树形控件点击事件
    async nodeClick() {}
    }
  },
  mounted() {
    // 初始化地图
    this.initMap();
    // 初始化饼状图
    this.getBatteryData();
@@ -247,7 +395,13 @@
};
</script>

<style scoped>
<style scoped  lang="less">
.filter-tree {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.page-index {
  color: #ffffff;
}

 vue.config.js

@@ -2,7 +2,7 @@
    publicPath: './',
    configureWebpack: config=> {
        config.externals = {
            TMap: "TMap"
           BMapGL : "BMapGL"
        }
    },
    devServer: {

			@@ -5,8 +5,7 @@
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
			<link rel="icon" href="<%= BASE_URL %>favicon.ico">
			<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=WYFBZ-2Z5LD-EKL4B-HN6ZN-JFOTV-MQFHJ"></script>
			<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=WYFBZ-2Z5LD-EKL4B-HN6ZN-JFOTV-MQFHJ"></script>
			<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=AWqwD701uOy6kaLIxBY2NDjATvE6x5IG"></script>
			<title><%= htmlWebpackPlugin.options.title %></title>
			</head>
			<body>

			@@ -5,6 +5,7 @@
			node-key="id"
			ref="tree"
			:data="data"
			:load="loadNode" lazy
			@node-click="nodeClick">
			</el-tree>
			</template>
			@@ -42,7 +43,7 @@
			}
			</script>

			<style scoped>
			<style scoped lang="less">
			.filter-tree {
			-webkit-user-select: none;
			-moz-user-select: none;

New file
			@@ -0,0 +1,52 @@
			<template>
			<el-tree
			class="filter-tree"
			:props="defaultProps"
			node-key="id"
			ref="tree"
			:data="data"
			@node-click="nodeClick">
			</el-tree>
			</template>

			<script>
			export default {
			name: 'MyElTree',
			props:{
			data:{
			type: Array,
			default() {
			return [];
			}
			}
			},
			data(){
			return {
			current: '',
			defaultProps: {
			children: 'children',
			label: 'label',
			}
			}
			},
			methods: {
			nodeClick(data, node) {
			node.isCurrent = node.isLeaf;
			if(node.isLeaf && this.current != node.key) {
			this.current = node.key;
			this.$emit('node-click', data);
			}
			this.$refs.tree.setCurrentKey(this.current);
			},
			}
			}
			</script>

			<style scoped lang="less">
			.filter-tree {
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			}
			</style>

			@@ -99,7 +99,7 @@
			}
			</script>

			<style scoped>
			<style scoped lang="less">
			.flex-layout {
			display: flex;
			height: 100%;

			@@ -1,10 +1,17 @@
			<template>
			<flex-layout direction="row" class="page-index">
			<content-box title="站点列表" slot="header" toggle style="width:320px">
			<my-el-tree :data="cityData" @node-click="nodeClick"></my-el-tree>
			<!-- <my-el-tree @node-click="nodeClick" :data="data"></my-el-tree> -->
			<el-tree
			@node-click="nodeClick"
			:load="loadNode"
			lazy
			class="filter-tree"
			:props="defaultProps"
			></el-tree>
			</content-box>
			<div class="map-container">
			<div ref="map" class="map-content"></div>
			<div class="map-content" id="allmap"></div>
			</div>
			<content-box title="站点列表" slot="footer" style="width:380px" no-header>
			<div class="pie-list">
			@@ -26,29 +33,32 @@
			</template>

			<script>
			import TMap from "TMap";
			import BMapGL from "BMapGL";
			import ContentBox from "../components/ContentBox";
			import MyElTree from "../components/MyElTree";
			/* import MyElTree from "../components/MyElTree"; */
			import PieChart from "../components/chart/PieChart";

			import {
			searchPowerOff,
			searchBattGood
			/* searchProvince,
			searchBattGood,
			searchProvince,
			searchCity,
			searchCounty, */
			searchCounty,
			searchStation,
			searchMapStation,
			searchBattInfo
			} from "@/assets/js/api";

			let map, chart1, chart2, chart3, chart4;
			let chart1, chart2, chart3, chart4;
			export default {
			components: {
			ContentBox,
			MyElTree,
			/* MyElTree, */
			PieChart
			},
			data() {
			return {
			cityData: [
			/* data: [
			{
			id: "湖北省",
			label: "湖北省",
			@@ -94,24 +104,162 @@
			}
			]
			}
			]
			] */

			defaultProps: {
			label: "label",
			isLeaf: (data, node) => {
			if (node.level === 4) {
			// 第三层没有子节点
			return true;
			}
			}
			}
			};
			},

			methods: {
			initMap() {
			map = new TMap.Map(this.$refs.map, {
			center: new TMap.LatLng(39.916527, 116.397128), //设置地图中心点坐标
			zoom: 17, //设置地图缩放级别
			viewMode: "3D",
			setPitch: 50

			// 按住鼠标右键，修改倾斜角和角度
			var map = new BMapGL.Map("allmap"); // 创建Map实例
			var point = new BMapGL.Point(116.404, 39.925);
			map.centerAndZoom(point, 15) // 初始化地图,设置中心点坐标和地图级别
			map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
			map.setHeading(64.5);
			map.setTilt(73);

			var marker = new BMapGL.Marker(point); // 创建点
			map.addOverlay(marker); // 将标注添加到地图中

			var opts = {
			width: 300, // 信息窗口宽度
			height: 200, // 信息窗口高度
			title: '<p style="font-size: 16px;color: #2ca90e;margin:2px;margin-bottom: 20px;">湖北省-鄂州市-东方世纪城-设备1 </p>', // 信息窗口标题
			message: "这里是故宫"
			};
			var infoWindow = new BMapGL.InfoWindow(
			'<p style="font-size: 16px;color: #2ca90e;margin:2px;margin-bottom: 20px;">蓄电池组告警数目：50 详情>> <br> 蓄电池组落后数目：0 详情>> <br> 蓄电池组延时数目：0 详情>> <br> 实时数据历史数据 <br>地址：上海市-上海市-浦东新区-卢东路</p>',

			opts); // 创建信息窗口对象
			marker.addEventListener("click", function() {
			map.openInfoWindow(infoWindow, point); //开启信息窗口
			});
			console.log(map);
			},

			//动态加载城市列表
			/* loadNode 加载子树数据的方法*/
			async loadNode() {},
			async loadNode(node, resolve) {
			console.log("node", node);
			if (node.level === 0) {
			/* * 查询省 */
			const { data: province } = await searchProvince();
			// console.log("province", province);
			if (province.result && JSON.parse(province.result).code == 0) {
			return this.$message.error(JSON.parse(province.result).msg);
			}
			const list = JSON.parse(province.result).data;
			//console.log("list", list)
			const cityData = list.map(item => {
			return { label: item }; /* return出一个对象最后得到一个数组对象 */
			});
			// console.log("cityData", cityData)
			return resolve(cityData);
			} else if (node.level === 1) {
			/* 查询市 */
			const city = await searchCity({ StationName1: node.data.label });
			//console.log('city.data.result',city.data.result);

			if (city.data.result && JSON.parse(city.data.result).code == 0) {
			return this.$message.error(JSON.parse(city.data.result).msg);
			}

			const citys = JSON.parse(city.data.result).data;
			const cityList = citys.map(item => {
			return { label: item };
			});
			return resolve(cityList);
			/* console.log("cityList", cityList); */
			} else if (node.level === 2) {
			/* 查询区县 */

			const county = await searchCounty({
			StationName1: node.parent.data.label,
			StationName2: node.data.label
			});
			//console.log(' county', county);

			if (county.data.result && JSON.parse(county.data.result).code == 0) {
			return this.$message.error(JSON.parse(county.data.result).msg);
			}

			const countys = JSON.parse(county.data.result).data;
			const countyList = countys.map(item => {
			return { label: item };
			});

			return resolve(countyList);
			} else if (node.level === 3) {
			/* room 机房信息 */
			const room = await searchStation({
			StationName1: node.parent.parent.data.label,
			StationName2: node.parent.data.label,
			StationName5: node.data.label
			});
			//console.log(' room', room);
			if (room.data.result && JSON.parse(room.data.result).code == 0) {
			return this.$message.error(JSON.parse(room.data.result).msg);
			}
			const rooms = JSON.parse(room.data.result).data;
			/* StationName3机房位置信息 */
			const roomList = rooms.map(item => {
			return { label: item.StationName3 };
			});
			return resolve(roomList);
			} else {
			/* 查询电池组信息 */
			return resolve([]);
			}
			},

			async handleInterface(node) {
			const [areaRoom, batteryList] = await Promise.all([
			/* 查询地图机房信息（结果中有机房的位置信息） */
			searchMapStation({
			StationName1: node.parent.parent.parent.data.label,
			StationName2: node.parent.parent.data.label,
			StationName5: node.parent.data.label
			}),
			/* 查询电池组信息 */
			searchBattInfo({
			StationName1: node.parent.parent.parent.data.label,
			StationName2: node.parent.parent.data.label,
			StationName5: node.parent.data.label,
			StationName3: node.data.label
			})
			]);
			//console.log('areaRoom',areaRoom);

			if (areaRoom.data.result && JSON.parse(areaRoom.data.result).code == 0) {
			return this.$message.error(JSON.parse(areaRoom.data.result).msg);
			}
			//console.log('batteryList',batteryList);
			if (batteryList.data.result && JSON.parse(batteryList.data.result).code == 0) {
			return this.$message.error(JSON.parse(batteryList.data.result).msg);
			}
			const list = JSON.parse(areaRoom.data.result).data;
			let obj = list.find(item => item.StationName3 == node.data.label);
			if (obj.longitude == 0 && obj.latitude == 0) {
			this.$message.warning("机房未定位");
			}
			},
			//树形控件点击事件
			async nodeClick(current, value) {
			console.log(value.level, value);
			if (value.level > 3) {
			this.handleInterface(value);
			}
			},

			initChart() {
			// 饼状图1
			chart1 = {
			@@ -224,6 +372,9 @@
			searchBattGood(),
			searchPowerOff()
			]);
			console.log('battGood',battGood);
			console.log('powerOff',powerOff);

			if (battGood.status !== 200) {
			return this.$message.error(battGood.statusText);
			}
			@@ -232,14 +383,11 @@
			}
			this.battGood = JSON.parse(battGood.data.result);
			this.powerOff = JSON.parse(powerOff.data.result);


			this.initChart();
			},
			//树形控件点击事件
			async nodeClick() {}
			}
			},
			mounted() {
			// 初始化地图
			this.initMap();
			// 初始化饼状图
			this.getBatteryData();
			@@ -247,7 +395,13 @@
			};
			</script>

			<style scoped>
			<style scoped lang="less">
			.filter-tree {
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			}
			.page-index {
			color: #ffffff;
			}

			@@ -2,7 +2,7 @@
			publicPath: './',
			configureWebpack: config=> {
			config.externals = {
			TMap: "TMap"
			BMapGL : "BMapGL"
			}
			},
			devServer: {